Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-21 16:04:31 +03:30
parent cfa21cbee9
commit 8e14748b48
29 changed files with 1460 additions and 244 deletions
@@ -0,0 +1,60 @@
+import Link from "next/link";
+import { ArrowUpLeft } from "lucide-react";
+import { Placeholder } from "@/components/Placeholder";
+import { faDigits, formatPrice } from "@/lib/format";
+import type { Product } from "@/lib/data";
+
+export function ProductCard({ product }: { product: Product }) {
+  const href = product.href ?? `/products/${encodeURIComponent(product.id)}`;
+
+  return (
+    <article className="group flex h-full flex-col rounded-2xl border border-line bg-white p-3">
+      <Link href={href} className="relative overflow-hidden rounded-xl bg-paper">
+        {product.discount ? (
+          <span className="absolute top-2 right-2 z-10 rounded-md bg-brand px-1.5 py-0.5 text-[11px] font-bold text-white">
+            {faDigits(product.discount)}٪
+          </span>
+        ) : null}
+        <Placeholder
+          src={product.image}
+          fallbackSrc="/placeholders/product.svg"
+          className="aspect-square w-full object-contain transition group-hover:scale-[1.03]"
+        />
+      </Link>
+      {product.brand ? (
+        <p className="font-latin mt-3 text-[11px] tracking-wide text-brand">{product.brand}</p>
+      ) : (
+        <p className="mt-3 h-[16px]" />
+      )}
+      <h3 className="mt-1 line-clamp-2 min-h-[40px] text-[13px] leading-5 text-ink">
+        <Link href={href}>{product.title}</Link>
+      </h3>
+      <div className="mt-auto pt-3">
+        {product.oldPrice ? (
+          <p className="text-[11px] text-muted line-through">{formatPrice(product.oldPrice)} تومان</p>
+        ) : (
+          <p className="h-[16px]" />
+        )}
+        <div className="mt-1 flex items-end justify-between gap-2">
+          <p className="text-[14px] font-bold text-ink">
+            {product.price != null ? (
+              <>
+                {formatPrice(product.price)}
+                <span className="mr-1 text-[11px] font-medium text-muted">تومان</span>
+              </>
+            ) : (
+              <span className="text-[12px] font-medium text-muted">تماس بگیرید</span>
+            )}
+          </p>
+          <Link
+            href={href}
+            className="grid size-9 place-items-center rounded-xl bg-brand text-white transition hover:bg-brand-dark"
+            aria-label="مشاهده محصول"
+          >
+            <ArrowUpLeft className="size-4" />
+          </Link>
+        </div>
+      </div>
+    </article>
+  );
+}