55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Waves, Utensils, ShoppingBag, Activity } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface Category {
|
|
id: string;
|
|
name: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
}
|
|
|
|
const categories: Category[] = [
|
|
{ id: "all", name: "Tout", icon: Activity },
|
|
{ id: "plages", name: "Plages", icon: Waves },
|
|
{ id: "restaurants", name: "Restaurants / Roulottes", icon: Utensils },
|
|
{ id: "epiceries", name: "Epiceries", icon: ShoppingBag },
|
|
{ id: "activites", name: "Activités", icon: Activity },
|
|
];
|
|
|
|
interface CategoryListProps {
|
|
selectedCategory: string;
|
|
onCategoryChange: (categoryId: string) => void;
|
|
}
|
|
|
|
export default function CategoryList({
|
|
selectedCategory,
|
|
onCategoryChange,
|
|
}: CategoryListProps) {
|
|
return (
|
|
<div className="flex gap-3 overflow-x-auto pb-2 px-4 scrollbar-hide">
|
|
{categories.map((category) => {
|
|
const Icon = category.icon;
|
|
const isSelected = selectedCategory === category.id;
|
|
return (
|
|
<button
|
|
key={category.id}
|
|
onClick={() => onCategoryChange(category.id)}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-xl whitespace-nowrap transition-colors",
|
|
isSelected
|
|
? "bg-primary text-white"
|
|
: "bg-white text-gray-700 border border-gray-200 hover:bg-secondary"
|
|
)}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
<span className="font-medium">{category.name}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|