45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import React, {ChangeEvent, Dispatch} from "react";
|
|
|
|
interface NumberInputProps {
|
|
value: number;
|
|
setValue: Dispatch<React.SetStateAction<number>>;
|
|
placeholder?: string;
|
|
readOnly?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function NumberInput(
|
|
{
|
|
value,
|
|
setValue,
|
|
placeholder,
|
|
readOnly = false,
|
|
disabled = false
|
|
}: NumberInputProps
|
|
) {
|
|
function handleChange(e: ChangeEvent<HTMLInputElement>) {
|
|
const newValue: number = parseInt(e.target.value);
|
|
if (!isNaN(newValue)) {
|
|
setValue(newValue);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<input
|
|
type="number"
|
|
value={value}
|
|
onChange={handleChange}
|
|
className={`w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50
|
|
focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
|
|
hover:bg-secondary hover:border-secondary
|
|
placeholder:text-muted/60
|
|
outline-none transition-all duration-200
|
|
${disabled ? 'opacity-50 cursor-not-allowed' : ''}
|
|
${readOnly ? 'cursor-default' : ''}`}
|
|
placeholder={placeholder}
|
|
readOnly={readOnly}
|
|
disabled={disabled}
|
|
/>
|
|
)
|
|
}
|