76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import BlurHashImage from '@/components/ui/BlurHashImage';
|
|
import { HierarchyBrandItem } from '@/services/api/catalogService';
|
|
|
|
interface BrandSelectorProps {
|
|
brands: HierarchyBrandItem[];
|
|
selectedBrandId: string | null;
|
|
onSelectBrand: (brandId: string | null) => void;
|
|
}
|
|
|
|
export const BrandSelector: React.FC<BrandSelectorProps> = ({
|
|
brands,
|
|
selectedBrandId,
|
|
onSelectBrand,
|
|
}) => {
|
|
if (!brands || brands.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 Brand
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
{/* All Brands Option */}
|
|
<button
|
|
onClick={() => onSelectBrand(null)}
|
|
className={`flex flex-col items-center justify-center p-5 rounded-2xl border transition-all duration-200 aspect-[4/3] ${
|
|
selectedBrandId === 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'
|
|
}`}
|
|
>
|
|
<span className="text-base font-extrabold tracking-wide mb-1">All</span>
|
|
<span className="text-[11px] opacity-70 font-medium">All Brands</span>
|
|
</button>
|
|
|
|
{/* Brand Items */}
|
|
{brands.map((brand) => {
|
|
const isSelected = selectedBrandId === brand.brand_id;
|
|
return (
|
|
<button
|
|
key={brand.brand_id}
|
|
onClick={() => onSelectBrand(brand.brand_id)}
|
|
className={`flex flex-col items-center justify-center p-5 rounded-2xl border transition-all duration-200 aspect-[4/3] ${
|
|
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'
|
|
}`}
|
|
>
|
|
{brand.logo_url ? (
|
|
<div className="relative w-12 h-12 mb-2">
|
|
<BlurHashImage
|
|
src={brand.logo_url}
|
|
alt={brand.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<span className="text-lg font-black tracking-tight text-gray-900 mb-1">
|
|
{brand.name}
|
|
</span>
|
|
)}
|
|
<span className="text-[11px] text-gray-500 font-medium capitalize truncate w-full text-center">
|
|
{brand.name}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|