Update May 12 by Elvis

app/boutique/page.tsx

@@ -1,30 +1,41 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useLanguage } from "@/contexts/LanguageContext";
-import { products, categories } from "@/data/products";
+import { categories } from "@/data/products";
+import type { Product } from "@/data/products";
+import { listProducts } from "@/lib/api/products";
 import ProductCard from "@/components/ProductCard";
 
-
 export default function Shop() {
   const { t } = useLanguage();
-  // const [searchParams] = useSearchParams();
-  // const initialCategory = searchParams.get("category") || "all";
   const [selectedCategory, setSelectedCategory] = useState("all");
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
 
-  const filtered = selectedCategory === "all" ? products : products.filter((p) => p.category === selectedCategory);
+  useEffect(() => {
+    setLoading(true);
+    listProducts({
+      per_page: 100,
+      category: selectedCategory === "all" ? undefined : selectedCategory,
+    })
+      .then((res) => setProducts(res.data))
+      .catch((e) => { console.error("[boutique] listProducts failed:", e); setProducts([]); })
+      .finally(() => setLoading(false));
+  }, [selectedCategory]);
 
   return (
     <div className="min-h-screen py-20 lg:py-12">
       <div className="container mx-auto px-4 lg:px-8">
         <h1 className="font-serif text-3xl lg:text-5xl text-center mb-8">{t("shop.title")}</h1>
 
-        {/* Filters */}
         <div className="flex flex-wrap justify-center gap-2 mb-10">
           <button
             onClick={() => setSelectedCategory("all")}
             className={`px-4 py-2 rounded-full text-sm transition-colors ${
-              selectedCategory === "all" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-accent"
+              selectedCategory === "all"
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted text-muted-foreground hover:bg-accent"
             }`}
           >
             {t("shop.filter.all")}
@@ -34,7 +45,9 @@ export default function Shop() {
               key={cat.id}
               onClick={() => setSelectedCategory(cat.id)}
               className={`px-4 py-2 rounded-full text-sm transition-colors cursor-pointer ${
-                selectedCategory === cat.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-accent"
+                selectedCategory === cat.id
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:bg-accent"
               }`}
             >
               {cat.name}
@@ -42,17 +55,22 @@ export default function Shop() {
           ))}
         </div>
 
-        {/* Product Grid */}
-        <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
-          {filtered.map((product) => (
-            <ProductCard key={product.id} product={product} />
-          ))}
-        </div>
-
-        {filtered.length === 0 && (
-          <p className="text-center text-muted-foreground py-20">Aucun produit trouvé.</p>
+        {loading ? (
+          <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="aspect-[3/4] bg-muted animate-pulse rounded-lg" />
+            ))}
+          </div>
+        ) : products.length === 0 ? (
+          <p className="text-center text-muted-foreground py-20">{t("shop.no_products")}</p>
+        ) : (
+          <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
+            {products.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
         )}
       </div>
     </div>
   );
-};
+}