first commit

2026-09-02 17:03:23 +03:30
commit 1bd131e9d8
91 changed files with 11211 additions and 0 deletions
@@ -0,0 +1,65 @@
+import Image from "next/image";
+import Link from "next/link";
+import { formatPrice, toFaDigits } from "@/lib/format";
+import type { ProductCardData } from "@/lib/types";
+
+export default function ProductCard({ product }: { product: ProductCardData }) {
+  const { href, title, image, price, oldPrice, percent, inStock } = product;
+  const hasOldPrice = price !== null && oldPrice !== null && oldPrice > price;
+
+  return (
+    <Link
+      href={href}
+      className="flex h-full flex-col rounded-lg border border-line bg-white p-2 transition hover:border-brand/40 hover:shadow-[0_6px_20px_rgba(0,0,0,0.07)]"
+    >
+      <span className="relative mb-2 block aspect-square w-full overflow-hidden rounded-md bg-white">
+        {image ? (
+          <Image
+            src={image}
+            alt={title}
+            fill
+            sizes="(max-width: 768px) 45vw, 180px"
+            className="object-contain p-1"
+          />
+        ) : (
+          <span className="flex size-full items-center justify-center text-[11px] text-body">
+            بدون تصویر
+          </span>
+        )}
+        {percent > 0 && (
+          <span className="absolute right-1.5 top-1.5 rounded-full bg-brand px-2 py-0.5 text-[11px] font-bold text-white">
+            {toFaDigits(percent)}٪
+          </span>
+        )}
+      </span>
+
+      <span className="clamp-2 mb-3 min-h-[42px] px-1 text-[12.5px] leading-[21px] text-ink-soft">
+        {title}
+      </span>
+
+      {/* The old-price line always occupies its row — rendered empty when there
+          is no discount — so a discounted card is exactly as tall as the rest
+          and every card in a carousel lines up. */}
+      <span className="mt-auto flex h-[44px] flex-col items-start justify-end px-1 pb-1">
+        {price !== null && inStock ? (
+          <>
+            <span
+              className={`h-[17px] text-[11px] text-body ${hasOldPrice ? "line-through" : ""}`}
+            >
+              {hasOldPrice ? formatPrice(oldPrice) : ""}
+            </span>
+            <span className="text-[15px] font-bold text-ink">
+              {formatPrice(price)}
+              <span className="mr-1 text-[11px] font-normal text-body">تومان</span>
+            </span>
+          </>
+        ) : (
+          <>
+            <span className="h-[17px]" />
+            <span className="text-[12px] text-body">ناموجود</span>
+          </>
+        )}
+      </span>
+    </Link>
+  );
+}