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

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

components/ProductCard.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { discountPercent, formatPrice } from "@/lib/format";
+import type { Product } from "@/lib/data";
+import { Media } from "./Media";
+
+export function ProductCard({ product }: { product: Product }) {
+  const off = discountPercent(product.price, product.oldPrice);
+  const unavailable = product.stock === 0 || product.price === 0;
+
+  return (
+    <Link href={product.slug ? `/products/${product.slug}` : "/products"} className="relative flex h-full min-h-[300px] flex-col overflow-hidden rounded-xl bg-white p-2">
+      {off > 0 && (
+        <span className="absolute top-2 left-2 z-[2] rounded-full bg-brand px-2.5 py-1.5 font-oswald text-[13px] font-bold leading-none text-white shadow-md">
+          {off}%
+        </span>
+      )}
+      <div className="relative">
+        <Media src={product.image} alt="" className="aspect-square rounded-lg" sizes="220px" />
+      </div>
+      <h3 className="mt-2 px-1 text-[13px] leading-6 text-ink line-clamp-2 min-h-12">{product.name}</h3>
+      <div className="mt-auto px-1 pb-1 pt-2">
+        {unavailable ? (
+          <span className="text-sm text-zinc-400">ناموجود</span>
+        ) : (
+          <div className="ms-auto flex flex-col items-end leading-tight">
+            {product.oldPrice ? (
+              <span className="text-[12px] font-medium text-brand line-through">
+                {formatPrice(product.oldPrice)}
+              </span>
+            ) : null}
+            <span className="text-[15px] font-bold text-[#333]">
+              {formatPrice(product.price)}
+              <span className="mr-1 text-[12px] font-normal">تومان</span>
+            </span>
+          </div>
+        )}
+      </div>
+    </Link>
+  );
+}