refactor(notes): split NoteEditor into NoteForm and NoteReadView

2026-09-13 17:47:13 +02:00
1 parent 7325485ee3
commit e13652a753
@@ -0,0 +1,71 @@
+import type { NoteFormProps } from '../interfaces/note-editor'
+
+const TITLE_REQUIRED_MESSAGE = 'Le titre est obligatoire.'
+
+function NoteForm({
+  title,
+  content,
+  titleMissing,
+  cancelLabel,
+  onTitleChange,
+  onContentChange,
+  onCancel,
+  onSubmit,
+}: NoteFormProps) {
+  return (
+    <form
+      className="flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm"
+      onSubmit={(event) => {
+        event.preventDefault()
+        onSubmit()
+      }}
+    >
+      <label className="flex flex-col gap-1">
+        <span className="text-sm font-medium text-gray-500">Titre</span>
+        <input
+          value={title}
+          onChange={(event) => onTitleChange(event.target.value)}
+          autoFocus
+          aria-invalid={titleMissing}
+          className={`w-full rounded-lg border px-3 py-3 text-base focus:outline-none focus:ring-2 ${
+            titleMissing
+              ? 'border-red-500 focus:ring-red-500/30'
+              : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/30'
+          }`}
+          placeholder="Sans titre"
+        />
+      </label>
+      {titleMissing && (
+        <span role="alert" className="text-sm text-red-600">
+          {TITLE_REQUIRED_MESSAGE}
+        </span>
+      )}
+      <label className="flex flex-col gap-1">
+        <span className="text-sm font-medium text-gray-500">Contenu</span>
+        <textarea
+          value={content}
+          onChange={(event) => onContentChange(event.target.value)}
+          className="w-full min-h-48 rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+          placeholder="Écrire ici…"
+        />
+      </label>
+      <div className="flex justify-end gap-3">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-lg border border-gray-300 px-5 py-3 text-gray-600 hover:bg-gray-50 active:bg-gray-100"
+        >
+          {cancelLabel}
+        </button>
+        <button
+          type="submit"
+          className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
+        >
+          Enregistrer
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export default NoteForm