new styles

frontend/style/components/cart-items.tsx

@@ -0,0 +1,97 @@
+"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>
+  )
+}
+