51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client"
|
||
|
||
import { useFavorites } from "@/contexts/favorites-context"
|
||
import { useCart } from "@/contexts/cart-context"
|
||
import { Button } from "./ui/button"
|
||
import { ShoppingCart, Trash } from 'lucide-react'
|
||
import Image from "next/image"
|
||
|
||
export function FavoriteItems() {
|
||
const { items, removeFromFavorites } = useFavorites()
|
||
const { addToCart } = useCart()
|
||
|
||
if (items.length === 0) {
|
||
return (
|
||
<div className="text-center py-12">
|
||
<h2 className="text-2xl font-semibold mb-4">Избранное</h2>
|
||
<p className="text-gray-500">У вас пока нет избранных товаров</p>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{items.map((item) => (
|
||
<div key={item.id} className="flex gap-4 p-4 bg-white rounded-lg">
|
||
<Image
|
||
src={item.image || "/placeholder.svg"}
|
||
alt={item.title}
|
||
width={100}
|
||
height={100}
|
||
className="object-cover"
|
||
/>
|
||
<div className="flex-1">
|
||
<h3 className="font-medium">{item.title}</h3>
|
||
<div className="text-lg font-bold mt-2">{item.price} ₽</div>
|
||
<div className="flex gap-4 mt-4">
|
||
<Button onClick={() => addToCart(item)}>
|
||
<ShoppingCart className="mr-2 h-4 w-4" /> В корзину
|
||
</Button>
|
||
<Button variant="outline" size="icon" onClick={() => removeFromFavorites(item.id)}>
|
||
<Trash className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|