98 lines
2.9 KiB
TypeScript
98 lines
2.9 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Checkbox } from "./ui/checkbox"
|
||
import { Button } from "./ui/button"
|
||
import { Minus, Plus, Heart, Trash } from 'lucide-react'
|
||
import Image from "next/image"
|
||
|
||
const SAMPLE_ITEMS = [
|
||
{
|
||
id: 1,
|
||
name: "Бумага офисная SvetoCopy, 500 листов, А4",
|
||
price: 352,
|
||
oldPrice: 399,
|
||
image: "/placeholder.svg",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "Глюкометр Диаконт Концепт + тест-полоски",
|
||
price: 1450,
|
||
oldPrice: 1599,
|
||
image: "/placeholder.svg",
|
||
}
|
||
]
|
||
|
||
export function CartItems() {
|
||
const [selectedItems, setSelectedItems] = useState<number[]>([])
|
||
|
||
const toggleItem = (id: number) => {
|
||
setSelectedItems(prev =>
|
||
prev.includes(id)
|
||
? prev.filter(item => item !== id)
|
||
: [...prev, id]
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Checkbox
|
||
checked={selectedItems.length === SAMPLE_ITEMS.length}
|
||
onCheckedChange={(checked) => {
|
||
setSelectedItems(checked ? SAMPLE_ITEMS.map(item => item.id) : [])
|
||
}}
|
||
/>
|
||
<span>Выбрать все</span>
|
||
{selectedItems.length > 0 && (
|
||
<button className="text-red-500 ml-4 hover:underline">
|
||
Удалить выбранные
|
||
</button>
|
||
)}
|
||
</div>
|
||
{SAMPLE_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}
|
||
alt={item.name}
|
||
width={100}
|
||
height={100}
|
||
className="object-cover"
|
||
/>
|
||
<div className="flex-1">
|
||
<h3 className="font-medium">{item.name}</h3>
|
||
<div className="flex gap-4 mt-4">
|
||
<div className="flex items-center gap-2">
|
||
<Button variant="outline" size="icon">
|
||
<Minus className="h-4 w-4" />
|
||
</Button>
|
||
<span className="w-8 text-center">1</span>
|
||
<Button variant="outline" size="icon">
|
||
<Plus className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
<Button variant="ghost" size="icon">
|
||
<Heart className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon">
|
||
<Trash className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-lg font-bold">{item.price} ₽</div>
|
||
<div className="text-sm text-muted-foreground line-through">
|
||
{item.oldPrice} ₽
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|