idk

mon-projet/src/App.css

@@ -186,3 +186,11 @@
         border-right-color: var(--border);
     }
 }
+.sombre {
+    background-color: #1a1a2e;
+    color: #eaeaea;
+}
+.sombre .carte {
+    background-color: #16213e;
+    color: #eaeaea;
+}

mon-projet/src/components/carte.jsx

@@ -6,6 +6,7 @@ function Carte(props) {
       <h2>{props.titre}</h2>
       <p>{props.niveaux}</p>
       <button onClick={props.onLike}>❤️ {props.likes}</button>
+      <button onClick={() => props.onDelete()}>🗑️</button>
     </div>
   );
 }

mon-projet/src/pages/Accueil.jsx

@@ -2,12 +2,20 @@ import { useState } from "react";
 import Carte from "../components/carte";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
-import { initialData } from "../data";
-import { useNavigate } from "react-router-dom";
-function Accueil({ likes, setLikes }) {
+function Accueil({ trilogies, setTrilogies, likes, setLikes }) {
   console.log("test");
+  const [a, setA] = useState(trilogies[0].id);
+  const [b, setB] = useState(trilogies[1].id);
+
+  const likesA = likes[a] || 0;
+  const likesB = likes[b] || 0;
+  const gagnante =
+    likesA === likesB
+      ? "Égalité"
+      : likesA > likesB
+        ? trilogies.find((t) => t.id === Number(a)).nom
+        : trilogies.find((t) => t.id === Number(b)).nom;
   const [recherche, setRecherche] = useState("");
-  const [trilogies, setTrilogies] = useState(initialData);
   const [nom, setNom] = useState("");
   const [niveaux, setNiveaux] = useState("");
   const [tri, setTri] = useState("nom");
@@ -18,13 +26,10 @@ function Accueil({ likes, setLikes }) {
       if (tri === "likes") return (likes[b.id] || 0) - (likes[a.id] || 0);
       return 0;
     });
-
-  const navigate = useNavigate();
-  function hasard() {
-    const i = Math.floor(Math.random() * trilogies.length);
-    navigate(`/trilogie/${trilogies[i].id}`);
-  }
-
+  const medailles = ["🥇", "🥈", "🥉"];
+  const podium = [...trilogies]
+    .sort((a, b) => (likes[b.id] || 0) - (likes[a.id] || 0))
+    .slice(0, 3);
   function ajouter(e) {
     e.preventDefault();
     if (nom.trim() === "") return;
@@ -37,18 +42,26 @@ function Accueil({ likes, setLikes }) {
   function liker(id) {
     setLikes((prev) => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
   }
-
+  function supprimer(id) {
+    setTrilogies(trilogies.filter((t) => t.id !== id));
+  }
   const total = Object.values(likes).reduce((s, n) => s + n, 0);
   return (
     <div className="body">
       <Header />
       <>
-        <button> </button>
         <select value={tri} onChange={(e) => setTri(e.target.value)}>
           <option value="nom">Nom (A→Z)</option>
           <option value="likes">Plus likées</option>
         </select>
       </>
+      <div className="podium">
+        {podium.map((t, index) => (
+          <p key={t.id}>
+            {medailles[index]} {t.nom} — {likes[t.id] || 0} ❤️
+          </p>
+        ))}
+      </div>
       <form onSubmit={ajouter}>
         <input
           value={nom}
@@ -78,6 +91,7 @@ function Accueil({ likes, setLikes }) {
           niveaux={trilo.niveaux}
           likes={likes[trilo.id] || 0}
           onLike={() => liker(trilo.id)}
+          onDelete={() => supprimer(trilo.id)}
         />
       ))}
       <Footer />