Add category detail URLs and polish mega menu UX.

Route categories to /products/category/{id}/{slug}, improve menu hover/layout, and hide stock/category clutter on product cards. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-23 00:34:23 +03:30
parent 5d53cf91eb
commit f078cdad0e
11 changed files with 375 additions and 128 deletions
@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { faDigits } from "@/lib/format";
+import type { Product } from "@/lib/data";
+
+export function ProductsListing({
+  products,
+  total,
+  page,
+  pageCount,
+  pageHref,
+}: {
+  products: Product[];
+  total: number;
+  page: number;
+  pageCount: number;
+  pageHref: (page: number) => string;
+}) {
+  return (
+    <>
+      {total ? <p className="mb-6 text-[13px] text-muted">{faDigits(total)} کالا</p> : null}
+
+      {products.length === 0 ? (
+        <div className="rounded-2xl border border-line bg-white px-6 py-16 text-center">
+          <p className="text-[15px] font-bold text-ink">محصولی برای نمایش وجود ندارد</p>
+          <p className="mt-2 text-[13px] text-muted">به‌زودی موجودی فروشگاه از پنل Meshkee اینجا دیده می‌شود.</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+          {products.map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </div>
+      )}
+
+      {pageCount > 1 ? (
+        <div className="mt-8 flex justify-center gap-2">
+          {Array.from({ length: pageCount }, (_, index) => {
+            const number = index + 1;
+            return (
+              <Link
+                key={number}
+                href={pageHref(number)}
+                className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
+              >
+                {faDigits(number)}
+              </Link>
+            );
+          })}
+        </div>
+      ) : null}
+    </>
+  );
+}