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/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>
+    </>
+  );
+}