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

export default function InputText({
  name,
  type,
  label,
  value,
  onChange,
  errorMsg,
  errorLocalMsg,
  placeholder,
  className,
  required,
  enable = true, // Nouvelle prop pour activer/désactiver le champ
}) {
  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 rounded-md ${
            errorMsg || errorLocalMsg
              ? 'border-red-500 hover:border-red-700'
              : 'border-gray-200 hover:border-gray-400'
          } ${!errorMsg && !errorLocalMsg ? 'focus-within:border-gray-500' : ''} ${
            !enable ? 'bg-gray-100 cursor-not-allowed' : ''
          }`}
        >
          <input
            type={type}
            id={name}
            placeholder={placeholder}
            name={name}
            value={value}
            onChange={enable ? onChange : undefined} // Désactiver onChange si enable est false
            className={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md ${
              !enable ? 'bg-gray-100 cursor-not-allowed' : ''
            }`}
            required={required}
            readOnly={!enable ? 'readOnly' : ''} // Activer le mode readonly si enable est false
          />
        </div>
        {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
      </div>
    </>
  );
}