n3wt-school/Front-End/src/components/InputText.js

export default function InputText({name, type, label, value, onChange, errorMsg, placeholder, className, required}) {
    return (
        <>
            <div className={`${className}`}>
                <label htmlFor={name} className="block text-sm font-medium text-gray-700">
                    {label}
                    {required && <span className="text-red-500 ml-1">*</span>}
                </label>
                <div className={`mt-1 flex items-center border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500`}>
                    <input
                        type={type}
                        id={name}
                        placeholder={placeholder}
                        name={name}
                        value={value}
                        onChange={onChange}
                        className="flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md"
                        required={required}
                    />
                </div>
                {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
            </div>
        </>
    )
}