react-material-time-picker/src/components/input/Input.js

TimePicker is a user interface component that allows the user to easily select a specific time. It provides an analog clock interface that is easy to use and intuitive. TimePicker can be easily integrated into other user interface components, making it a

import {useTheme} from "../../ThemeContext.js";
import './input.scss'

const Input = (props) => {
    const [ colors ] = useTheme()
    const styles = {
        default: {
            backgroundColor: colors.surfaceVariant,
            outline: 'none',
            color:colors.onSurface
        },
        warning: {
            border: `2px solid ${colors.error}`,
            backgroundColor: colors.errorContainer
        },
        focused: {
            backgroundColor: colors.primaryContainer,
            color:colors.onPrimaryContainer,
            border: `2px solid ${colors.primary}`
        }
    };


    const currentStyle = props.active ? (props.error ? styles.warning : styles.focused) : styles.default;

    return (
        <input value={ props.value }
               onChange={ props.onChange }
               onBlur={ props.onBlur }
               onClick={ props.onClick }
               max={ props.max || '' }
               min={ props.min || '' }
               className={ props.className }
               type={ props.type || '' }
               placeholder={ props.placeholder || '' }
               style={ currentStyle }
        />
    );
};

export {Input}