cart

2025-08-12 15:35:34 +03:30
parent 92370259c1
commit 418b45fde5
12 changed files with 574 additions and 5 deletions
@@ -0,0 +1,64 @@
+"use client";
+
+import { Add, Minus, Trash } from "iconsax-react";
+import React from "react";
+
+type CartControlsProps = {
+    quantity: number;
+    onChange: (next: number) => void;
+    onRemove: () => void;
+    min?: number;
+    max?: number;
+    className?: string;
+};
+
+export default function CartControls(props: CartControlsProps) {
+    const { quantity, onChange, onRemove, min = 1, max, className } = props;
+
+    const canDecrement = quantity > min;
+    const canIncrement = typeof max === "number" ? quantity < max : true;
+
+    const orange = "blue";
+
+    return (
+        <div className={"flex items-center gap-4 " + (className ?? "")}>
+
+
+            <div className="h-12 rounded-xl border border-border bg-white px-4 min-w-[138px] flex items-center justify-between">
+                <button
+                    type="button"
+                    onClick={() => canIncrement && onChange(quantity + 1)}
+                    className="disabled:opacity-40 disabled:cursor-not-allowed"
+                    disabled={!canIncrement}
+                    aria-label="increase quantity"
+                >
+                    <Add size={22} color={orange} />
+                </button>
+                <span className="text-[18px] font-medium" style={{ color: orange }}>
+                    {quantity}
+                </span>
+                <button
+                    type="button"
+                    onClick={() => canDecrement && onChange(quantity - 1)}
+                    className="disabled:opacity-40 disabled:cursor-not-allowed"
+                    disabled={!canDecrement}
+                    aria-label="decrease quantity"
+                >
+                    <Minus size={22} color={orange} />
+                </button>
+
+            </div>
+
+            <button
+                type="button"
+                onClick={onRemove}
+                className="h-12 w-12 rounded-xl border border-border grid place-items-center bg-white"
+                aria-label="remove from cart"
+            >
+                <Trash size={22} color="#AD3434" />
+            </button>
+        </div>
+    );
+}
+
+