79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|