Create Glassmond storefront with Meshkee integration

Build the RTL Next.js experience with live catalog, journal, customer interactions, and SEO-ready canonical routes. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-26 00:08:00 +03:30
commit 98fde02322
66 changed files with 8280 additions and 0 deletions
@@ -0,0 +1,51 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import {
+  productImage,
+  productUrl,
+  slugifyFa,
+  type Product,
+} from "@/lib/meshkee";
+
+export function ApiProductCard({
+  product,
+  headingLevel = 2,
+}: {
+  product: Product;
+  headingLevel?: 2 | 3;
+}) {
+  const title = product.nameFa || product.title;
+  const href = productUrl(product);
+  const Heading = headingLevel === 3 ? "h3" : "h2";
+  const categoryTitle = product.categoryNameFa || product.categoryName || "آینه هوشمند";
+  const categoryHref = product.categoryId
+    ? `/products/category/${product.categoryId}/${slugifyFa(categoryTitle)}`
+    : null;
+
+  return (
+    <article className="catalog-product-card">
+      <Link className="catalog-product-image" href={href}>
+        <Image
+          src={productImage(product) || "/images/hero.jpg"}
+          alt={title}
+          fill
+          sizes="(max-width: 620px) 100vw, (max-width: 1000px) 50vw, 33vw"
+        />
+      </Link>
+      <div className="catalog-product-copy">
+        <span>
+          {categoryHref ? <Link href={categoryHref}>{categoryTitle}</Link> : categoryTitle}
+        </span>
+        <Heading><Link href={href}>{title}</Link></Heading>
+        <div>
+          <p>{product.store?.inStock ? "موجود" : "برای سفارش تماس بگیرید"}</p>
+          <Link href={href} aria-label={`مشاهده ${title}`}>
+            جزئیات
+            <ArrowLeft />
+          </Link>
+        </div>
+      </div>
+    </article>
+  );
+}