50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
"use client";
|
|
import { Card, CardContent, CardFooter } from "@/components/ui/card";
|
|
import { Badge } from "@/components/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export interface Product {
|
|
id: string;
|
|
name: string;
|
|
price: number;
|
|
category: string;
|
|
image: string;
|
|
isNew?: boolean;
|
|
isSale?: boolean;
|
|
}
|
|
|
|
export function ProductCard({ product }: { product: Product }) {
|
|
return (
|
|
<Card className="group overflow-hidden border-none shadow-sm hover:shadow-md transition-all duration-300">
|
|
<Link href={`/shop/${product.id}`}>
|
|
<div className="relative aspect-[4/5] overflow-hidden bg-neutral-100">
|
|
<Image
|
|
src={product.image}
|
|
alt={product.name}
|
|
fill
|
|
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute top-4 left-4 flex flex-col gap-2">
|
|
{product.isNew && <Badge className="bg-black text-white">New Arrival</Badge>}
|
|
{product.isSale && <Badge variant="outline" className="bg-red-500 text-white border-none">Sale</Badge>}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<CardContent className="pt-4 px-2">
|
|
<p className="text-xs text-neutral-500 uppercase tracking-wider mb-1">{product.category}</p>
|
|
<h3 className="font-semibold text-neutral-900 group-hover:text-primary transition-colors">
|
|
{product.name}
|
|
</h3>
|
|
<p className="mt-1 font-bold text-neutral-900">${product.price}</p>
|
|
</CardContent>
|
|
<CardFooter className="px-2 pb-4 pt-0">
|
|
<Button variant="secondary" className="w-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
Add to Cart
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|