mise en place de l'application de base

2026-03-22 18:45:37 +01:00
commit eddb103755
18 changed files with 6038 additions and 0 deletions
@@ -0,0 +1,90 @@
+import { useState } from 'react'
+
+const emptyForm = () => ({
+  title: '',
+  author: '',
+  year: new Date().getFullYear(),
+  genre: '',
+  read: false,
+})
+
+export function BookForm({ onSubmit }) {
+  const [form, setForm] = useState(() => emptyForm())
+
+  function handleSubmit(e) {
+    e.preventDefault()
+    if (!form.title.trim() || !form.author.trim()) return
+    onSubmit(form)
+    setForm(emptyForm())
+  }
+
+  return (
+    <form className="book-form" onSubmit={handleSubmit}>
+      <h2>Enregistrer un nouveau livre</h2>
+      <p className="book-form-story">Je veux enregistrer un nouveau livre</p>
+      <p className="book-form-api">
+        <code>POST /api/books</code>
+        <span className="book-form-api-note">
+          {' '}
+          (dans cette appli : enregistrement local, pas de serveur)
+        </span>
+      </p>
+      <div className="form-grid">
+        <label>
+          Titre
+          <input
+            required
+            value={form.title}
+            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+            placeholder="Ex. Les Misérables"
+          />
+        </label>
+        <label>
+          Auteur·ice
+          <input
+            required
+            value={form.author}
+            onChange={(e) => setForm((f) => ({ ...f, author: e.target.value }))}
+            placeholder="Ex. Victor Hugo"
+          />
+        </label>
+        <label>
+          Année
+          <input
+            type="number"
+            min={1000}
+            max={2100}
+            value={form.year}
+            onChange={(e) =>
+              setForm((f) => ({
+                ...f,
+                year: Number(e.target.value) || f.year,
+              }))
+            }
+          />
+        </label>
+        <label>
+          Genre
+          <input
+            value={form.genre}
+            onChange={(e) => setForm((f) => ({ ...f, genre: e.target.value }))}
+            placeholder="Roman, essai…"
+          />
+        </label>
+      </div>
+      <label className="checkbox-row">
+        <input
+          type="checkbox"
+          checked={form.read}
+          onChange={(e) => setForm((f) => ({ ...f, read: e.target.checked }))}
+        />
+        Déjà lu
+      </label>
+      <div className="form-actions">
+        <button type="submit" className="btn primary">
+          Enregistrer (POST)
+        </button>
+      </div>
+    </form>
+  )
+}