Silvia

src/front/components/Navbar.css

@@ -0,0 +1,29 @@
+.searchBar {
+  position: relative;
+  & .bar {
+    display: flex;
+    width: 20rem;
+    height: 2rem;
+    & .inputhori {
+      background: transparent;
+      width: 100%;
+      margin-right: 1rem;
+    }
+  }
+  & .results {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 2.5rem;
+    right: 0;
+    width: 20rem;
+    z-index: 1000;
+    border: 1px solid rgb(73, 73, 73);
+    border-radius: 5px;
+    padding: 10px;
+    gap: 5px;
+    & span {
+      color: white;
+    }
+  }
+}

src/front/components/Navbar.jsx

@@ -9,12 +9,13 @@ import useGlobalReducer from "../hooks/useGlobalReducer";
 export default function Navbar({ showDrowpdown, setShowDrowpdown }) {
   const { store, dispatch } = useGlobalReducer()
   const { all_games } = store;
-  console.log(all_games)
   const navigate = useNavigate()
   const token_user = localStorage.getItem('jwt-token');
   const user = localStorage.getItem('user');
   const [view, setview] = useState(false);
   const [searchGame, setSearchGame] = useState()  /* Barra de buscar funcional*/
+  const [gamesFilter, setGamesFilter] = useState([])  /* Barra de buscar funcional*/
+
 
 
   const handleSearch = () => {
@@ -45,22 +46,28 @@ export default function Navbar({ showDrowpdown, setShowDrowpdown }) {
     } else {
       setview(false)
     }
-    console.log("hola", user, "Asdasd")
   }, [token_user]);
 
 
   const search = () => {
-
     const game = all_games.find(game => game.name === searchGame)
-    console.log(game)
-    console.log(game.id)
-    navigate(`/DetailsGames/${game.id}`)
-
-    if (!game.name == searchGame)
+    if (!game) {
       alert("Juego no encontrado")
+    } else {
+      navigate(`/DetailsGames/${game.id}`)
+    }
+  }
 
+  const filter = (text) => {
+    let filterGames = all_games.filter((g) => {
+      return g.name.toLowerCase().includes(text.toLowerCase())
+    })
+    setGamesFilter(filterGames)
   }
 
+  console.log(gamesFilter)
+
+
 
   return (
     <nav className="bg-gray-900">
@@ -115,17 +122,39 @@ export default function Navbar({ showDrowpdown, setShowDrowpdown }) {
                   )}
 
                 {/* Barra de buscar funcional*/}
+                <div className='searchBar'>
+                  <div className='bar'>
+                    <input
+                      type="text"
+                      value={searchGame}
+                      onChange={(e) => { setSearchGame(e.target.value), filter(e.target.value) }}
+                      placeholder="Buscar..."
+                      className="px-1 py-1 border rounded-md focus:outline-none inputhori focus:ring focus:border-gray-900"
+                    />
+                    <button onClick={search}>
+                      Buscar
+                    </button>
+                  </div>
+                  {
+                    (gamesFilter.length > 0 && searchGame.length > 0) && (
+                      <div className='results bg-gray-900'>
+
+                        {
+                          gamesFilter.map((g) => {
+                            return (
+                              <Link to={`/detailsgames/${g.id}`}>
+                                <span>{g.name}</span>
+                              </Link>
+                            )
+                          })
+                        }
+                      </div>
+                    )
+                  }
 
-                <input
-                  type="text"
-                  value={searchGame}
-                  onChange={(e) => setSearchGame(e.target.value)}
-                  placeholder="Buscar..."
-                  className="px-1 py-1 border rounded-md focus:outline-none focus:ring focus:border-gray-900"
-                />
-                <button onClick={search}>
-                  Buscar
-                </button>
+
+
+                </div>
 
               </div>
             </div>

src/front/pages/detailsGames/DetailsGames.jsx

@@ -21,7 +21,7 @@ export const DetailsGames = () => {
 
   useEffect(() => {
     getDetailsGame()
-  }, [])
+  }, [id])
 
    useEffect(() => {
     if (user) {

src/front/routes.jsx

@@ -61,9 +61,7 @@ export const router = createBrowserRouter(
         <Route path="/recPassword" element={<RecPassword />} />
         <Route path="/resetPassword/:token" element={<ResetPassword />} />
         <Route path="/editgames/:id" element={<EditGames />} />
-        <Route path="/games/platform/:platform" element={<GamesByPlatform />} />
-
-
+        <Route path="/games/platform/:platform" element={<GamesByPlatform />} />       
       </Route>
     )
 );