42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
|
export interface StepperInputProps {
|
|||
|
|
value: number;
|
|||
|
|
min: number;
|
|||
|
|
max: number;
|
|||
|
|
onChange: (v: number) => void;
|
|||
|
|
decrementLabel?: string;
|
|||
|
|
incrementLabel?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function StepperInput({
|
|||
|
|
value,
|
|||
|
|
min,
|
|||
|
|
max,
|
|||
|
|
onChange,
|
|||
|
|
decrementLabel = "Decrease",
|
|||
|
|
incrementLabel = "Increase",
|
|||
|
|
}: StepperInputProps) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => onChange(Math.max(min, value - 1))}
|
|||
|
|
className="w-9 h-9 rounded-md border border-input flex items-center justify-center text-lg font-medium hover:bg-accent transition-colors"
|
|||
|
|
aria-label={decrementLabel}
|
|||
|
|
disabled={value <= min}
|
|||
|
|
>
|
|||
|
|
−
|
|||
|
|
</button>
|
|||
|
|
<span className="w-10 text-center text-lg font-semibold tabular-nums">{value}</span>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => onChange(Math.min(max, value + 1))}
|
|||
|
|
className="w-9 h-9 rounded-md border border-input flex items-center justify-center text-lg font-medium hover:bg-accent transition-colors"
|
|||
|
|
aria-label={incrementLabel}
|
|||
|
|
disabled={value >= max}
|
|||
|
|
>
|
|||
|
|
+
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|