84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
"use client"
|
||
|
||
import Image from "next/image"
|
||
import Link from "next/link"
|
||
import { Heart, ShoppingCart } from 'lucide-react'
|
||
import { Button } from "./ui/button"
|
||
import { useCart } from "@/contexts/cart-context"
|
||
import { useFavorites } from "@/contexts/favorites-context"
|
||
|
||
interface ProductCardProps {
|
||
product: {
|
||
id: number
|
||
title: string
|
||
price: number
|
||
image: string
|
||
}
|
||
}
|
||
|
||
export function ProductCard({ product }: ProductCardProps) {
|
||
const { addToCart, removeFromCart } = useCart()
|
||
const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
|
||
|
||
const handleAddToCart = (e: React.MouseEvent) => {
|
||
e.preventDefault()
|
||
addToCart({
|
||
id: product.id,
|
||
title: product.title,
|
||
price: product.price,
|
||
})
|
||
}
|
||
|
||
const handleRemoveFromCart = (e: React.MouseEvent) => {
|
||
e.preventDefault()
|
||
removeFromCart(product.id)
|
||
}
|
||
|
||
const handleToggleFavorite = (e: React.MouseEvent) => {
|
||
e.preventDefault()
|
||
if (isFavorite(product.id)) {
|
||
removeFromFavorites(product.id)
|
||
} else {
|
||
addToFavorites({
|
||
id: product.id,
|
||
title: product.title,
|
||
price: product.price,
|
||
})
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Link href={`/product/${product.id}`} className="group relative bg-white rounded-lg p-2 transition-shadow hover:shadow-lg block">
|
||
<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"
|
||
onClick={handleToggleFavorite}
|
||
>
|
||
<Heart className={`h-5 w-5 ${isFavorite(product.id) ? 'fill-red-500 text-red-500' : ''}`} />
|
||
</Button>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<span className="text-xl font-bold">{product.price} ₽</span>
|
||
<h3 className="text-sm line-clamp-2">{product.title}</h3>
|
||
<div className="flex gap-2">
|
||
<Button onClick={handleAddToCart} className="flex-1">
|
||
<ShoppingCart className="mr-2 h-4 w-4" /> В корзину
|
||
</Button>
|
||
<Button onClick={handleRemoveFromCart} variant="outline" size="icon">
|
||
-
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
)
|
||
}
|
||
|