ERitors-Scribe-Desktop/components/form/NumberInput.tsx

import {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}
        />
    )
}