92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { Suspense, useState, useEffect } from "react";
|
|
import { useLanguage } from "@/contexts/LanguageContext";
|
|
import { useSearchParams, useRouter } from "next/navigation";
|
|
import { categories } from "@/data/products";
|
|
import type { Product } from "@/data/products";
|
|
import { listProducts } from "@/lib/api/products";
|
|
import ProductCard from "@/components/ProductCard";
|
|
|
|
function ShopContent() {
|
|
const { t } = useLanguage();
|
|
const searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
const selectedCategory = searchParams.get("category") || "all";
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const setCategory = (cat: string) => {
|
|
router.push(cat === "all" ? "/boutique" : `/boutique?category=${cat}`);
|
|
};
|
|
|
|
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>
|
|
|
|
<div className="flex flex-wrap justify-center gap-2 mb-10">
|
|
<button
|
|
onClick={() => setCategory("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"
|
|
}`}
|
|
>
|
|
{t("shop.filter.all")}
|
|
</button>
|
|
{categories.map((cat) => (
|
|
<button
|
|
key={cat.id}
|
|
onClick={() => setCategory(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"
|
|
}`}
|
|
>
|
|
{cat.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{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>
|
|
);
|
|
}
|
|
|
|
export default function Shop() {
|
|
return (
|
|
<Suspense>
|
|
<ShopContent />
|
|
</Suspense>
|
|
);
|
|
}
|