feat(notes): add note editor

src/components/NoteEditor.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import type { Note } from '../types'
+
+interface NoteEditorProps {
+  note: Note
+  onUpdate: (id: number, patch: Partial<Pick<Note, 'title' | 'content'>>) => void
+}
+
+function NoteEditor({ note, onUpdate }: NoteEditorProps) {
+  const [editing, setEditing] = useState(false)
+  const [title, setTitle] = useState(note.title)
+  const [content, setContent] = useState(note.content)
+
+  const startEditing = () => {
+    setTitle(note.title)
+    setContent(note.content)
+    setEditing(true)
+  }
+
+  const cancel = () => {
+    setEditing(false)
+  }
+
+  const save = () => {
+    onUpdate(note.id, { title, content })
+    setEditing(false)
+  }
+
+  if (editing) {
+    return (
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault()
+          save()
+        }}
+      >
+        <label className="flex flex-col gap-1">
+          <span className="text-sm font-medium text-gray-500">Titre</span>
+          <input
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            className="w-full border border-gray-300 rounded px-3 py-2"
+            placeholder="Sans titre"
+          />
+        </label>
+        <label className="flex flex-col gap-1">
+          <span className="text-sm font-medium text-gray-500">Contenu</span>
+          <textarea
+            value={content}
+            onChange={(event) => setContent(event.target.value)}
+            className="w-full border border-gray-300 rounded px-3 py-2 min-h-40"
+            placeholder="Écrire ici…"
+          />
+        </label>
+        <div className="flex justify-between">
+          <button
+            type="button"
+            onClick={cancel}
+            className="px-4 py-2 rounded border border-gray-300 text-gray-600"
+          >
+            Annuler
+          </button>
+          <button type="submit" className="px-4 py-2 rounded bg-blue-600 text-white">
+            Enregistrer
+          </button>
+        </div>
+      </form>
+    )
+  }
+
+  return (
+    <article className="flex flex-col gap-4">
+      <h2 className="text-2xl font-semibold">{note.title || 'Sans titre'}</h2>
+      <p className="whitespace-pre-wrap">
+        {note.content || <span className="text-gray-400 italic">Note vide</span>}
+      </p>
+      <div>
+        <button
+          type="button"
+          onClick={startEditing}
+          className="px-4 py-2 rounded bg-blue-600 text-white"
+        >
+          Éditer
+        </button>
+      </div>
+    </article>
+  )
+}
+
+export default NoteEditor