hamid zarghami
83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
'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
|
|
/** عرض کامل (۱۰۰٪) */
|
|
fullWidth?: boolean
|
|
}
|
|
|
|
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 = 'در حال افزودن...',
|
|
fullWidth = false,
|
|
}: CartQuantityControlProps) {
|
|
return (
|
|
<motion.div
|
|
whileTap={{ scale: 1.05 }}
|
|
className={`bg-background active:drop-shadow-xs rounded-md h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden ${fullWidth ? 'w-full' : 'max-w-[115px] w-full'}`}
|
|
>
|
|
{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>
|
|
)
|
|
}
|