started creating BarreRecherche.jsx but unfinished

react-project/src/App.jsx

@@ -7,7 +7,7 @@ import "./App.css";
 function App() {
   const [recherche, setRecherche] = useState("");
   const [total, setTotal] = useState(0);
-  const [jeux, setJeux] = useState([]); // au départ : liste vide
+  const [jeux, setJeux] = useState([]);
   const [chargement, setChargement] = useState(true);
 
   const filtres = jeux.filter((j) =>
@@ -19,15 +19,11 @@ function App() {
       .then((r) => r.json())
       .then((data) => {
         setJeux(data);
-
+        document.title = `${data.length} jeux Zelda`;
         setChargement(false);
       });
   }, []);
 
-  useEffect(() => {
-    document.title = `${jeux.length} jeux Zelda`;
-  }, [jeux]);
-
   if (chargement) return <p>Chargement…</p>;
 
   return (

react-project/src/components/BarreRecherche.jsx

@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+const [jeux, setJeux] = useState([]);
+const [recherche, setRecherche] = useState("");
+
+useEffect(() => {
+  document.title = `${jeux.length} jeux Zelda`;
+}, [jeux]);
+
+const filtres = jeux.filter((j) =>
+  j.titre.toLowerCase().includes(recherche.toLowerCase()),
+);
+ const [total, setTotal] = useState(0);
+
+function BarreRecherche() {
+  return (
+    <input
+      type="search"
+      placeholder="Search Game…"
+      value={recherche}
+      onChange={(e) => setRecherche(e.target.value)}
+    />
+
+    {filtres.length === 0 && <p>Aucun jeu trouvé 😕</p>}
+
+    {filtres.map((jeu) => (
+      <Carte
+        key={jeu.id}
+        gameId={jeu.id}
+        titre={jeu.titre}
+        console={jeu.console}
+        annee={jeu.annee}
+        onLike={() => setTotal((t) => t + 1)}
+      />
+    ))}
+    <p> Total de likes : {total}</p>
+  );
+}
+
+export default BarreRecherche;