checkpoint before checking out main

2026-08-13 13:53:22 +03:30
parent a7643bb931
commit 141f1a30be
23 changed files with 1357 additions and 84 deletions
@@ -0,0 +1,63 @@
+import { Placeholder } from "./Placeholder";
+import { formatPrice } from "@/data/sample";
+
+type ProductCardProps = {
+  name: string;
+  brand: string;
+  price: number;
+  oldPrice?: number;
+  discount?: number;
+  variant?: "sale" | "default" | "brand";
+};
+
+export function ProductCard({
+  name,
+  brand,
+  price,
+  oldPrice,
+  discount,
+  variant = "default",
+}: ProductCardProps) {
+  return (
+    <article className="group w-[220px] shrink-0 overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md md:w-[240px]">
+      <div className="relative">
+        <Placeholder width="100%" height="200px" label="240×200" className="w-full rounded-none border-0 border-b border-dashed" />
+        {discount && (
+          <span className="absolute top-3 right-3 rounded-md bg-red px-2 py-0.5 text-xs font-bold text-white">
+            {discount}٪
+          </span>
+        )}
+        {variant === "brand" && (
+          <span className="font-display absolute top-3 left-3 text-[10px] font-bold tracking-widest text-red-dark uppercase">
+            {brand}
+          </span>
+        )}
+      </div>
+      <div className="p-4">
+        <p className="font-display mb-1 text-[11px] tracking-wide text-muted uppercase">
+          {brand}
+        </p>
+        <h3 className="mb-3 line-clamp-2 min-h-[2.75rem] text-sm leading-relaxed font-medium">
+          {name}
+        </h3>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-base font-bold text-red-dark">
+            {formatPrice(price)}
+            <span className="mr-0.5 text-xs font-normal text-muted">تومان</span>
+          </span>
+          {oldPrice && (
+            <span className="text-xs text-muted line-through">
+              {formatPrice(oldPrice)}
+            </span>
+          )}
+        </div>
+        <button
+          type="button"
+          className="mt-3 w-full rounded-lg bg-red py-2 text-sm font-medium text-white transition-colors hover:bg-red-dark"
+        >
+          افزودن به سبد
+        </button>
+      </div>
+    </article>
+  );
+}