feat: creation d'un FormRenderer.js pour creer un formulaire dynamique [NEWTS-17]

Front-End/src/components/Form/InputText.js

@@ -0,0 +1,51 @@
+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>
+    </>
+  );
+}