55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { useBrand } from '@/context/BrandContext';
|
|
|
|
interface CategoryPillsProps {
|
|
activeCategory: string;
|
|
onSelectCategory: (category: string) => void;
|
|
}
|
|
|
|
const CATEGORIES = [
|
|
{ id: 'all', label: '🔥 Todo el Catálogo' },
|
|
{ id: 'Sandalias', label: '🩴 Sandalias' },
|
|
{ id: 'Zapatillas', label: '👟 Zapatillas' },
|
|
{ id: 'Gorras', label: '🧢 Gorras' },
|
|
{ id: 'Bolsos', label: '👜 Bolsos' },
|
|
{ id: 'Carrieles', label: '👝 Carrieles' },
|
|
{ id: 'Maletines', label: '🎒 Maletines' },
|
|
{ id: 'Ropa', label: '👕 Ropa' },
|
|
{ id: 'Accesorios', label: '🕶️ Accesorios' },
|
|
{ id: 'Nike', label: '⚡ Nike' },
|
|
{ id: 'Adidas', label: '🛹 Adidas' },
|
|
{ id: 'Jordan', label: '🏀 Jordan' },
|
|
{ id: 'flash', label: '⚡ Ofertas Flash' },
|
|
{ id: 'under120', label: '💰 Menos de $120k' },
|
|
];
|
|
|
|
export const CategoryPills: React.FC<CategoryPillsProps> = ({
|
|
activeCategory,
|
|
onSelectCategory,
|
|
}) => {
|
|
const { currentBrand } = useBrand();
|
|
|
|
return (
|
|
<div className="flex items-center space-x-2 overflow-x-auto pb-3 scrollbar-none">
|
|
{CATEGORIES.map((cat) => {
|
|
const isActive = activeCategory === cat.id;
|
|
return (
|
|
<button
|
|
key={cat.id}
|
|
onClick={() => onSelectCategory(cat.id)}
|
|
className={`shrink-0 text-xs sm:text-sm font-bold px-4 py-2 rounded-full transition-all duration-300 cursor-pointer select-none ${
|
|
isActive
|
|
? `bg-gradient-to-r ${currentBrand.colors.primaryGradient} text-white shadow-md scale-105 border border-white/20`
|
|
: 'bg-slate-900/60 hover:bg-slate-800 text-slate-300 border border-slate-800'
|
|
}`}
|
|
>
|
|
{cat.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|