Update components/product-card.tsx

components/product-card.tsx

@@ -0,0 +1,78 @@
+"use client";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { BlurImage } from "@/components/blur-image";
+import Link from "next/link";
+import { Badge } from "@/components/badge";
+
+interface ProductCardProps {
+  id: string;
+  name: string;
+  price: number;
+  originalPrice?: number;
+  image: string;
+  category: string;
+  isNew?: boolean;
+  isSale?: boolean;
+}
+
+export function ProductCard({
+  id,
+  name,
+  price,
+  originalPrice,
+  image,
+  category,
+  isNew,
+  isSale,
+}: ProductCardProps) {
+  const discount = originalPrice
+    ? Math.round(((originalPrice - price) / originalPrice) * 100)
+    : 0;
+
+  return (
+    <Card className="group overflow-hidden hover:shadow-lg transition-all duration-300">
+      <Link href={`/product/${id}`}>
+        <div className="relative h-64 overflow-hidden bg-neutral-100 dark:bg-neutral-800">
+          <BlurImage
+            src={image}
+            alt={name}
+            fill
+            className="object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+          <div className="absolute top-3 right-3 flex flex-col gap-2">
+            {isNew && <Badge>New</Badge>}
+            {isSale && discount > 0 && (
+              <Badge variant="destructive">-{discount}%</Badge>
+            )}
+          </div>
+        </div>
+      </Link>
+      <CardContent className="p-4">
+        <p className="text-xs text-neutral-500 dark:text-neutral-400 uppercase tracking-wide mb-1">
+          {category}
+        </p>
+        <Link href={`/product/${id}`}>
+          <h3 className="font-semibold text-lg mb-2 group-hover:text-neutral-600 dark:group-hover:text-neutral-300 transition-colors">
+            {name}
+          </h3>
+        </Link>
+        <div className="flex items-center gap-2">
+          <span className="text-xl font-bold text-neutral-900 dark:text-neutral-100">
+            ${price}
+          </span>
+          {originalPrice && (
+            <span className="text-sm text-neutral-500 line-through">
+              ${originalPrice}
+            </span>
+          )}
+        </div>
+      </CardContent>
+      <CardFooter className="p-4 pt-0">
+        <Button className="w-full" variant="outline">
+          Add to Cart
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}