another one

frontend/style/components/cart-items.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import type React from "react"
+
 import { useState } from "react"
 import { Checkbox } from "./ui/checkbox"
 import { Button } from "./ui/button"
@@ -30,6 +32,11 @@ export function CartItems() {
     updateQuantity(id, newQuantity)
   }
 
+  const handleButtonClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
   return (
     <div className="space-y-4">
       <div className="mb-4">
@@ -48,22 +55,29 @@ export function CartItems() {
       {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)} />
-          <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-grow flex gap-4">
+            <Link href={`/product/${item.id}`} className="block">
+              <Image
+                src={item.image || "/placeholder.svg"}
+                alt={item.title}
+                width={100}
+                height={100}
+                className="object-cover"
+              />
+            </Link>
             <div className="flex-1">
-              <h3 className="font-medium">{item.title}</h3>
-              <div className="flex gap-4 mt-4">
+              <Link href={`/product/${item.id}`}>
+                <h3 className="font-medium">{item.title}</h3>
+              </Link>
+              <div className="flex flex-wrap gap-4 mt-4">
                 <div className="flex items-center gap-2">
                   <Button
                     variant="outline"
                     size="icon"
-                    onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}
+                    onClick={(e) => {
+                      handleButtonClick(e)
+                      handleUpdateQuantity(item.id, item.quantity - 1)
+                    }}
                   >
                     <Minus className="h-4 w-4" />
                   </Button>
@@ -71,20 +85,37 @@ export function CartItems() {
                   <Button
                     variant="outline"
                     size="icon"
-                    onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}
+                    onClick={(e) => {
+                      handleButtonClick(e)
+                      handleUpdateQuantity(item.id, item.quantity + 1)
+                    }}
                   >
                     <Plus className="h-4 w-4" />
                   </Button>
                 </div>
-                <Button variant="ghost" size="icon" onClick={() => handleToggleFavorite(item)}>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={(e) => {
+                    handleButtonClick(e)
+                    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)}>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={(e) => {
+                    handleButtonClick(e)
+                    removeAllFromCart(item.id)
+                  }}
+                >
                   <Trash className="h-4 w-4" />
                 </Button>
               </div>
             </div>
-          </Link>
+          </div>
           <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>