23 lines
938 B
TypeScript
23 lines
938 B
TypeScript
interface Props {
|
|
value: number
|
|
min?: number
|
|
max?: number
|
|
onChange: (value: number) => void
|
|
className?: string
|
|
style?: React.CSSProperties
|
|
'aria-label'?: string
|
|
}
|
|
|
|
export default function NumberInput({ value, min = 0, max = 999, onChange, className, style, 'aria-label': ariaLabel }: Props) {
|
|
const clamp = (n: number) => Math.min(max, Math.max(min, n))
|
|
|
|
return (
|
|
<div className={`cv-number ${className || ''}`} style={style}
|
|
role="spinbutton" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} aria-label={ariaLabel}>
|
|
<button className="cv-number-btn" onClick={() => onChange(clamp(value - 1))} type="button" disabled={value <= min} aria-label="Decrease">-</button>
|
|
<span className="cv-number-value">{value}</span>
|
|
<button className="cv-number-btn" onClick={() => onChange(clamp(value + 1))} type="button" disabled={value >= max} aria-label="Increase">+</button>
|
|
</div>
|
|
)
|
|
}
|