feat: add product catalog with URL-based category filtering

2026-09-15 11:14:40 +03:30
parent 421760dc62
commit f49ef11c9c
16 changed files with 198 additions and 26 deletions
@@ -0,0 +1,69 @@
+'use client';
+
+import Link from 'next/link';
+import {usePathname, useRouter, useSearchParams} from 'next/navigation';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {commerceCopy} from '@/data/commerce';
+import {filterMachines, productCategories} from '@/data/products';
+import QuantityControl from './QuantityControl';
+
+export default function ProductsPage() {
+    const {t, locale} = useLanguage();
+    const copy = commerceCopy[locale];
+    const searchParams = useSearchParams();
+    const pathname = usePathname();
+    const router = useRouter();
+    const category = searchParams.get('category') ?? '';
+    const products = filterMachines(t.machines, category);
+    const knownCategory = productCategories.some(item => item.id === category);
+
+    const setCategory = (value: string) => {
+        const params = new URLSearchParams(searchParams.toString());
+        if (value) params.set('category', value);
+        else params.delete('category');
+        // Preserve other query parameters and allow browser Back to restore filters.
+        const query = params.toString();
+        router.push(query ? `${pathname}?${query}` : pathname, {scroll: false});
+    };
+
+    return (
+        <main className="max-w-7xl mx-auto px-5 md:px-8 pt-28 pb-20 min-h-[70vh]">
+            <h1 className="text-3xl md:text-4xl font-extrabold text-primary">{copy.allProducts}</h1>
+            <p className="text-secondary mt-4 leading-7">{copy.productsDescription}</p>
+            <div className="mt-8 mb-8 rounded-2xl border border-subtle bg-surface p-5 flex flex-wrap items-end gap-4">
+                <div className="flex flex-col gap-2 w-full sm:w-72">
+                    <label htmlFor="product-category" className="text-sm font-semibold text-primary">{copy.category}</label>
+                    <select id="product-category" value={category} onChange={event => setCategory(event.target.value)}
+                            className="w-full border border-subtle bg-elevated text-primary rounded-xl px-4 py-3 focus:outline-brand">
+                        <option value="">{copy.allCategories}</option>
+                        {category && !knownCategory && <option value={category}>{copy.unknownCategory}</option>}
+                        {productCategories.map(item => <option key={item.id} value={item.id}>{item.label[locale]}</option>)}
+                    </select>
+                </div>
+                {category && <button onClick={() => setCategory('')} className="text-brand-400 py-3 hover:underline">{copy.clearFilters}</button>}
+                <p aria-live="polite" aria-atomic="true" className="text-secondary text-sm py-3 sm:ms-auto">
+                    {products.length.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US')} {copy.results}
+                </p>
+            </div>
+            {products.length ? (
+                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {products.map(machine => (
+                        <article key={machine.id} className="flex flex-col rounded-3xl border border-subtle bg-surface p-5">
+                            <Link href={`/products/${machine.id}`} className="rounded-2xl bg-page p-5">
+                                <img src={machine.image} alt={machine.name} className="w-full h-60 object-contain"/>
+                            </Link>
+                            <span className="text-brand-400 text-xs mt-5">{productCategories.find(item => item.id === machine.category)?.label[locale]}</span>
+                            <h2 className="text-xl font-bold text-primary mt-2"><Link href={`/products/${machine.id}`}>{machine.name}</Link></h2>
+                            <p className="text-secondary text-sm leading-7 mt-3 mb-5">{machine.description}</p>
+                            <p className="text-primary text-lg font-bold mt-auto mb-4">{machine.priceLabel}</p>
+                            <div className="flex flex-wrap items-center justify-between gap-3">
+                                <QuantityControl product={machine}/>
+                                <Link href={`/products/${machine.id}`} className="text-brand-400 text-sm hover:underline">{copy.details}</Link>
+                            </div>
+                        </article>
+                    ))}
+                </div>
+            ) : <div className="text-center text-secondary border border-subtle rounded-2xl p-12">{copy.noProducts}</div>}
+        </main>
+    );
+}