Build the Salar Store storefront and connect products, blogs, and home specials to the Meshkee API.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/products/[slug]/page.tsx

@@ -0,0 +1,111 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { PageHero } from "@/components/PageHero";
+import { Pagination } from "@/components/Pagination";
+import { ProductGrid } from "@/components/ProductGrid";
+import { ProductTabs } from "@/components/ProductTabs";
+import { ProductView } from "@/components/ProductView";
+import { getCategories, getCategoryBySlug, getComments, getProduct, getStoreItemByProduct } from "@/lib/api";
+import { listMappedProductsForCategory } from "@/lib/mappers";
+import { SITE } from "@/lib/site";
+
+type Props = {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ page?: string }>;
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
+  try {
+    const product = await getProduct(slug);
+    if (product) {
+      return {
+        title: `${product.nameFa || product.title} | ${SITE.nameFa}`,
+        description: product.summary || SITE.tagline,
+      };
+    }
+
+    const category = await getCategoryBySlug(slug);
+    if (category) {
+      return {
+        title: `${category.nameFa || category.name} | ${SITE.nameFa}`,
+        description: SITE.tagline,
+      };
+    }
+  } catch {
+    // fall through
+  }
+
+  return { title: SITE.nameFa };
+}
+
+export default async function ProductOrCategoryPage({ params, searchParams }: Props) {
+  const { slug } = await params;
+  const product = await getProduct(slug);
+
+  if (product) {
+    const [storeItem, comments] = await Promise.all([
+      getStoreItemByProduct(product.id),
+      getComments("product", product.id),
+    ]);
+    return (
+      <>
+        <PageHero
+          title={product.nameFa || product.title}
+          english={product.title}
+          crumbs={[{ name: "محصولات", href: "/products" }, { name: product.nameFa || product.title }]}
+        />
+        <section className="container-site py-10 md:py-14">
+          <ProductView product={product} variants={storeItem?.variants ?? []} />
+          <ProductTabs productId={product.id} descriptionHtml={product.descriptionHtml} comments={comments} />
+        </section>
+      </>
+    );
+  }
+
+  const [category, categories] = await Promise.all([getCategoryBySlug(slug), getCategories()]);
+  if (!category) notFound();
+
+  const { page: pageParam } = await searchParams;
+  const page = Math.max(1, Number(pageParam) || 1);
+  const children = categories.filter((item) => item.parentId === category.id);
+  const data = await listMappedProductsForCategory(
+    category.id,
+    children.map((item) => item.id),
+    page,
+    16,
+  );
+
+  return (
+    <>
+      <PageHero
+        title={category.nameFa || category.name}
+        english={category.name}
+        crumbs={[{ name: "محصولات", href: "/products" }, { name: category.nameFa || category.name }]}
+      />
+      <section className="container-site py-10 md:py-14">
+        {children.length > 0 && (
+          <div className="mb-8 flex flex-wrap gap-2">
+            {children.map((item) => (
+              <Link
+                key={item.id}
+                href={`/products/${item.slug}`}
+                className="rounded-full border border-black/10 px-4 py-2 text-sm hover:border-brand hover:text-brand"
+              >
+                {item.nameFa || item.name}
+              </Link>
+            ))}
+          </div>
+        )}
+        <ProductGrid products={data.items} />
+        <Pagination
+          page={data.page}
+          pageSize={data.pageSize}
+          total={data.total}
+          makeHref={(nextPage) => (nextPage > 1 ? `/products/${slug}?page=${nextPage}` : `/products/${slug}`)}
+        />
+      </section>
+    </>
+  );
+}

app/products/page.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import { PageHero } from "@/components/PageHero";
+import { Pagination } from "@/components/Pagination";
+import { ProductGrid } from "@/components/ProductGrid";
+import { listMappedProducts } from "@/lib/mappers";
+import { SITE } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `محصولات | ${SITE.nameFa}`,
+  description: SITE.tagline,
+};
+
+type Props = {
+  searchParams: Promise<{ q?: string; page?: string }>;
+};
+
+export default async function ProductsPage({ searchParams }: Props) {
+  const { q, page: pageParam } = await searchParams;
+  const page = Math.max(1, Number(pageParam) || 1);
+  const pageSize = 16;
+  const data = await listMappedProducts({ page, pageSize, name: q });
+
+  const makeHref = (nextPage: number) => {
+    const params = new URLSearchParams();
+    if (q) params.set("q", q);
+    if (nextPage > 1) params.set("page", String(nextPage));
+    const query = params.toString();
+    return query ? `/products?${query}` : "/products";
+  };
+
+  return (
+    <>
+      <PageHero title={q ? `جستجو: ${q}` : "محصولات"} english="Products" />
+      <section className="container-site py-10 md:py-14">
+        <ProductGrid products={data.items} />
+        <Pagination page={data.page} pageSize={data.pageSize} total={data.total} makeHref={makeHref} />
+      </section>
+    </>
+  );
+}