MERDE.COM/eternos
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reviews

Browse Source
This commit is contained in:
User
2025-02-15 21:19:04 +03:00
parent 8a1f44692c
commit 73c80dcc16
9 changed files with 488 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/style/components/cart-items.tsx
View File

@@ -3,10 +3,11 @@
import { useState } from "react"
import { Checkbox } from "./ui/checkbox"
import { Button } from "./ui/button"
import { Minus, Plus, Heart, Trash } from 'lucide-react'
import { Minus, Plus, Heart, Trash } from "lucide-react"
import Image from "next/image"
import { useCart } from "@/contexts/cart-context"
import { useFavorites } from "@/contexts/favorites-context"
import Link from "next/link"
export function CartItems() {
const { items, removeFromCart, addToCart, removeAllFromCart, updateQuantity, getTotalQuantity } = useCart()
@@ -14,14 +15,10 @@ export function CartItems() {
const [selectedItems, setSelectedItems] = useState<number[]>([])
const toggleItem = (id: number) => {
setSelectedItems(prev =>
prev.includes(id)
? prev.filter(item => item !== id)
: [...prev, id]
)
setSelectedItems((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]))
}
const handleToggleFavorite = (item: typeof items[0]) => {
const handleToggleFavorite = (item: (typeof items)[0]) => {
if (isFavorite(item.id)) {
removeFromFavorites(item.id)
} else {
@@ -39,57 +36,58 @@ export function CartItems() {
<span className="font-semibold">Всего товаров: {getTotalQuantity()}</span>
</div>
<div className="flex items-center gap-2 mb-4">
<Checkbox
<Checkbox
checked={selectedItems.length === items.length}
onCheckedChange={(checked) => {
setSelectedItems(checked ? items.map(item => item.id) : [])
setSelectedItems(checked ? items.map((item) => item.id) : [])
}}
/>
<span>Выбрать все</span>
{selectedItems.length > 0 && (
<button className="text-red-500 ml-4 hover:underline">
Удалить выбранные
</button>
)}
{selectedItems.length > 0 && <button className="text-red-500 ml-4 hover:underline">Удалить выбранные</button>}
</div>
{items.map((item) => (
<div key={item.id} className="flex gap-4 p-4 bg-white rounded-lg">
<Checkbox
checked={selectedItems.includes(item.id)}
onCheckedChange={() => toggleItem(item.id)}
/>
<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="flex gap-4 mt-4">
<div className="flex items-center gap-2">
<Button variant="outline" size="icon" onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}>
<Minus className="h-4 w-4" />
<Checkbox checked={selectedItems.includes(item.id)} onCheckedChange={() => toggleItem(item.id)} />
<Link href={`/product/${item.id}`} className="flex-grow flex gap-4">
<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="flex gap-4 mt-4">
<div className="flex items-center gap-2">
<Button
variant="outline"
size="icon"
onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}
>
<Minus className="h-4 w-4" />
</Button>
<span className="w-8 text-center">{item.quantity}</span>
<Button
variant="outline"
size="icon"
onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}
>
<Plus className="h-4 w-4" />
</Button>
</div>
<Button variant="ghost" size="icon" onClick={() => handleToggleFavorite(item)}>
<Heart className={`h-4 w-4 ${isFavorite(item.id) ? "fill-red-500 text-red-500" : ""}`} />
</Button>
<span className="w-8 text-center">{item.quantity}</span>
<Button variant="outline" size="icon" onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}>
<Plus className="h-4 w-4" />
<Button variant="ghost" size="icon" onClick={() => removeAllFromCart(item.id)}>
<Trash className="h-4 w-4" />
</Button>
</div>
<Button variant="ghost" size="icon" onClick={() => handleToggleFavorite(item)}>
<Heart className={`h-4 w-4 ${isFavorite(item.id) ? 'fill-red-500 text-red-500' : ''}`} />
</Button>
<Button variant="ghost" size="icon" onClick={() => removeAllFromCart(item.id)}>
<Trash className="h-4 w-4" />
</Button>
</div>
</div>
</Link>
<div className="text-right">
<div className="text-lg font-bold">{item.price * item.quantity} ₽</div>
<div className="text-sm text-muted-foreground">
{item.price} ₽ за шт.
</div>
<div className="text-sm text-muted-foreground">{item.price} ₽ за шт.</div>
</div>
</div>
))}