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

export default function InputTextIcon({
  name,
  type,
  IconItem,
  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' : ''
          }`}
        >
          <span className="inline-flex min-h-9 items-center px-3 rounded-l-md bg-gray-50 text-gray-500 text-sm">
            {IconItem && <IconItem />}
          </span>
          <input
            type={type}
            id={name}
            placeholder={placeholder}
            name={name}
            value={value}
            onChange={enable ? onChange : undefined}
            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' : ''}
          />
        </div>
        {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
      </div>
    </>
  );
}