fix bulk + fix variand

2026-02-10 14:40:35 +03:30
parent d1c8338c00
commit 60157e4d14
8 changed files with 122 additions and 113 deletions
@@ -0,0 +1,79 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import MinusIcon from '@/components/icons/MinusIcon'
+import PlusIcon from '@/components/icons/PlusIcon'
+
+export interface CartQuantityControlProps {
+  quantity: number
+  onAdd: () => void
+  onRemove: () => void
+  /** در حال ارسال درخواست به سرور (نمایش اسپینر به‌جای آیکون) */
+  isMutating?: boolean
+  /** غیرفعال کردن دکمه افزودن (مثلاً وقتی variant انتخاب نشده) */
+  addDisabled?: boolean
+  /** متن دکمه وقتی quantity صفر است */
+  addLabel?: string
+  /** متن دکمه در حالت loading */
+  addingLabel?: string
+}
+
+const Spinner = () => (
+  <span className="size-4 border-2 border-foreground/30 border-t-foreground rounded-full animate-spin block" />
+)
+
+export function CartQuantityControl({
+  quantity,
+  onAdd,
+  onRemove,
+  isMutating = false,
+  addDisabled = false,
+  addLabel = 'افزودن',
+  addingLabel = 'در حال افزودن...',
+}: CartQuantityControlProps) {
+  return (
+    <motion.div
+      whileTap={{ scale: 1.05 }}
+      className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
+    >
+      {quantity <= 0 ? (
+        <button
+          onClick={onAdd}
+          disabled={isMutating || addDisabled}
+          className="inline-flex w-full justify-center items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          {isMutating ? <Spinner /> : <PlusIcon />}
+          <div className="text-sm2 pt-0.5 font-normal text-foreground">
+            {isMutating ? addingLabel : addLabel}
+          </div>
+        </button>
+      ) : (
+        <>
+          <button
+            onClick={onAdd}
+            disabled={isMutating}
+            className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {isMutating ? <Spinner /> : <PlusIcon className="text-foreground" />}
+          </button>
+          <motion.div
+            key={quantity}
+            initial={{ scale: 1 }}
+            animate={{ scale: [1.2, 0.95, 1] }}
+            transition={{ duration: 0.3 }}
+            className="text-sm2 pt-0.5 font-semibold"
+          >
+            {quantity}
+          </motion.div>
+          <button
+            onClick={onRemove}
+            disabled={isMutating}
+            className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {isMutating ? <Spinner /> : <MinusIcon className="text-foreground" />}
+          </button>
+        </>
+      )}
+    </motion.div>
+  )
+}