61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import Image from "next/image"
|
||
import { Heart } from 'lucide-react'
|
||
import { Button } from "./ui/button"
|
||
import { Badge } from "./ui/badge"
|
||
|
||
interface ProductCardProps {
|
||
product: {
|
||
id: number
|
||
title: string
|
||
price: number
|
||
oldPrice: number
|
||
discount: number
|
||
image: string
|
||
isHotDeal?: boolean
|
||
isSale?: boolean
|
||
}
|
||
}
|
||
|
||
export function ProductCard({ product }: ProductCardProps) {
|
||
return (
|
||
<div className="group relative bg-white rounded-lg p-2 transition-shadow hover:shadow-lg">
|
||
<div className="relative aspect-square mb-2">
|
||
<Image
|
||
src={product.image}
|
||
alt={product.title}
|
||
fill
|
||
className="object-cover rounded-lg"
|
||
/>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
|
||
>
|
||
<Heart className="h-5 w-5" />
|
||
</Button>
|
||
{product.isHotDeal && (
|
||
<div className="absolute top-2 left-2 bg-pink-500 text-white px-2 py-1 text-xs font-medium rounded">
|
||
НАРАСХВАТ
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="flex items-baseline gap-2">
|
||
<span className="text-xl font-bold">{product.price} ₽</span>
|
||
<span className="text-sm text-muted-foreground line-through">
|
||
{product.oldPrice} ₽
|
||
</span>
|
||
<span className="text-sm text-red-500">-{product.discount}%</span>
|
||
</div>
|
||
<h3 className="text-sm line-clamp-2">{product.title}</h3>
|
||
{product.isSale && (
|
||
<Badge variant="destructive" className="mt-2">
|
||
Распродажа
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|