51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Minus, Plus } from 'lucide-react';
|
|
|
|
interface QuantityControlsProps {
|
|
quantity: number;
|
|
onIncrease: () => void;
|
|
onDecrease: () => void;
|
|
isDisabled?: boolean;
|
|
minQuantity?: number;
|
|
}
|
|
|
|
export function QuantityControls({
|
|
quantity,
|
|
onIncrease,
|
|
onDecrease,
|
|
isDisabled = false,
|
|
minQuantity = 1
|
|
}: QuantityControlsProps) {
|
|
return (
|
|
<div className="flex border border-gray-300 rounded-md">
|
|
<Button
|
|
onClick={onDecrease}
|
|
variant="default"
|
|
className="px-3 py-1 border-0 rounded-none"
|
|
disabled={isDisabled || quantity <= minQuantity}
|
|
aria-label="Decrease quantity"
|
|
size="sm"
|
|
>
|
|
<Minus size={16} />
|
|
</Button>
|
|
<input
|
|
type="text"
|
|
value={quantity}
|
|
readOnly
|
|
className="w-10 text-center border-x border-gray-300"
|
|
/>
|
|
<Button
|
|
onClick={onIncrease}
|
|
variant="default"
|
|
className="px-3 py-1 border-0 rounded-none"
|
|
disabled={isDisabled}
|
|
aria-label="Increase quantity"
|
|
size="sm"
|
|
>
|
|
<Plus size={16} />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|