first commit

components/explorer/CategoryList.tsx

@@ -0,0 +1,54 @@
+"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>
+  );
+}
+