formulaire + début tri

mon-projet/src/App.jsx

@@ -3,7 +3,7 @@ import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Carte from "./components/Carte";
 import { useState } from "react";
-const trilogies = [
+const intialData = [
   {
     id: 1,
     nom: "The RGB Trilogy",
@@ -34,6 +34,25 @@ const trilogies = [
 function App() {
   const [likes, setLikes] = useState({}); // {} au départ (pas {1:3, 4:1})
   const [recherche, setRecherche] = useState("");
+  const [trilogies, setTrilogies] = useState(intialData);
+  const [nom, setNom] = useState("");
+  const [niveaux, setNiveaux] = useState("");
+  const [tri, setTri] = useState("nom");
+
+  const affichees = [...trilogies].sort((a, b) => {
+    if (tri === "nom") return a.nom.localeCompare(b.nom);
+    if (tri === "likes") return (likes[b.id] || 0) - (likes[a.id] || 0);
+    return 0;
+  });
+  function ajouter(e) {
+    e.preventDefault(); // empêche le rechargement de page
+    if (nom.trim() === "") return; // on n'ajoute pas du vide
+    const nouvelle = { id: Date.now(), nom, niveaux }; // id unique simple
+    setTrilogies([...trilogies, nouvelle]); // 👈 NOUVEAU tableau = ancien + la nouvelle
+    setNom(""); // on vide les champs
+    setNiveaux("");
+  }
+
   function liker(id) {
     setLikes((prev) => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
   }
@@ -47,6 +66,25 @@ function App() {
   return (
     <div className="body">
       <Header />
+      <>
+        <select value={tri} onChange={(e) => setTri(e.target.value)}>
+          <option value="nom">Nom (A→Z)</option>
+          <option value="likes">Plus likées</option>
+        </select>
+      </>
+      <form onSubmit={ajouter}>
+        <input
+          value={nom}
+          onChange={(e) => setNom(e.target.value)}
+          placeholder="Nom de la trilogie"
+        />
+        <input
+          value={niveaux}
+          onChange={(e) => setNiveaux(e.target.value)}
+          placeholder="Niveaux"
+        />
+        <button type="submit">Ajouter</button>
+      </form>
       <input
         type="search"
         placeholder="Rechercher une trilogie…"
@@ -55,7 +93,6 @@ function App() {
       />
       <p>👍 Total de likes : {total}</p>
       {filtrees.length === 0 && <p>Aucune trilogie trouvée</p>}
-
       {filtrees.map((trilo) => (
         <Carte
           key={trilo.id}