81 lines
3 KiB
TypeScript
81 lines
3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import BlurHashImage from '@/components/ui/BlurHashImage';
|
|
import { Smartphone } from 'lucide-react';
|
|
import { HierarchyModelItem } from '@/services/api/catalogService';
|
|
import { getImageUrl } from '@/lib/utils';
|
|
|
|
interface ModelSelectorProps {
|
|
models: HierarchyModelItem[];
|
|
selectedModelId: string | null;
|
|
onSelectModel: (modelId: string | null) => void;
|
|
}
|
|
|
|
export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
|
models,
|
|
selectedModelId,
|
|
onSelectModel,
|
|
}) => {
|
|
if (!models || models.length === 0) return null;
|
|
|
|
return (
|
|
<div className="w-full mb-8">
|
|
<h3 className="text-base font-bold text-gray-900 mb-4 tracking-tight">
|
|
Select Model
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
{/* All Models Card */}
|
|
<button
|
|
onClick={() => onSelectModel(null)}
|
|
className={`flex flex-col items-center justify-center p-4 rounded-2xl border transition-all duration-200 aspect-[4/5] ${
|
|
selectedModelId === null
|
|
? 'bg-gray-900 text-white border-gray-900 shadow-md ring-2 ring-gray-900/20 scale-[1.02]'
|
|
: 'bg-white text-gray-800 border-gray-200 hover:border-gray-400 hover:shadow-md'
|
|
}`}
|
|
>
|
|
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3 text-gray-600">
|
|
<Smartphone className="w-6 h-6" />
|
|
</div>
|
|
<span className="text-xs font-bold text-center">All Models</span>
|
|
</button>
|
|
|
|
{/* Model Cards */}
|
|
{models.map((model) => {
|
|
const isSelected = selectedModelId === model.model_id;
|
|
const imageUrl = getImageUrl(model.image_url);
|
|
return (
|
|
<button
|
|
key={model.model_id}
|
|
onClick={() => onSelectModel(model.model_id)}
|
|
className={`flex flex-col items-center justify-center p-4 rounded-2xl border transition-all duration-200 aspect-[4/5] ${
|
|
isSelected
|
|
? 'bg-red-50 text-red-700 border-red-500 ring-2 ring-red-500/20 shadow-md font-bold scale-[1.02]'
|
|
: 'bg-white text-gray-900 border-gray-200 hover:border-gray-400 hover:shadow-md'
|
|
}`}
|
|
>
|
|
{model.image_url ? (
|
|
<div className="relative w-16 h-20 mb-3">
|
|
<BlurHashImage
|
|
src={imageUrl}
|
|
alt={model.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-14 h-16 mb-3 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400 border border-gray-100">
|
|
<Smartphone className="w-7 h-7" />
|
|
</div>
|
|
)}
|
|
<span className="text-xs font-medium text-center line-clamp-2 leading-tight">
|
|
{model.name}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|