From 67d893447708c01952dac990d8bf86d9d39ef4ba Mon Sep 17 00:00:00 2001
From: Melissa <stage2@echoes.solutions>
Date: Wed, 24 Jun 2026 16:51:57 +0200
Subject: [PATCH] started creating BarreRecherche.jsx but unfinished

---
 react-project/src/App.jsx                     |  8 +---
 .../src/components/BarreRecherche.jsx         | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 react-project/src/components/BarreRecherche.jsx

diff --git a/react-project/src/App.jsx b/react-project/src/App.jsx
index 6220cde..18f4b0b 100644
--- a/react-project/src/App.jsx
+++ b/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 (
diff --git a/react-project/src/components/BarreRecherche.jsx b/react-project/src/components/BarreRecherche.jsx
new file mode 100644
index 0000000..9b48202
--- /dev/null
+++ b/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;