Update movie-app/src/pages/Header.js

movie-app/src/pages/Header.js

@@ -1,83 +1,3 @@
-// import React, { useState, useEffect } from "react";
-// import logo from "../assets/logo.png";
-// import { Outlet} from "react-router-dom";
-
-// import { useNavigate } from "react-router-dom";
-// import "./Header.css";
-
-// const Header = () => {
-//   const [searchTerm, setSearchTerm] = useState("");
-//   const [suggestions, setSuggestions] = useState([]);
-//   const navigate = useNavigate();
-
-//   useEffect(() => {
-//     if (searchTerm) {
-//       const fetchSuggestions = async () => {
-//         const response = await fetch(
-//           `https://api.themoviedb.org/3/search/movie?api_key=59690efd14e375225c4531fcdced2901&query=${searchTerm}`
-//         );
-//         const data = await response.json();
-//         setSuggestions(data.results);
-//       };
-//       fetchSuggestions();
-//     } else {
-//       setSuggestions([]);
-//     }
-//   }, [searchTerm]);
-
-//   const handleSearchChange = (e) => {
-//     setSearchTerm(e.target.value);
-//   };
-
-//   const handleSuggestionClick = (id) => {
-//     navigate(`/search?id=${id}`);
-//     setSearchTerm("");
-//     setSuggestions([]);
-//   };
-
-//   return (
-//     <>
-//     <header className="header">
-//       <div className="header-container">
-//         <div>
-//           <img src={logo} alt="logo" className="logo" />
-//         </div>
-
-//         <div className="search-container">
-//           <input
-//             type="text"
-//             value={searchTerm}
-//             onChange={handleSearchChange}
-//             className="search-input"
-//             placeholder="Search for movies..."
-//           />
-//           {suggestions.length > 0 && (
-//             <ul className="suggestions-list">
-//               {suggestions.map((movie) => (
-//                 <li
-//                   key={movie.id}
-//                   className="suggestion-item"
-//                   onClick={() => handleSuggestionClick(movie.id)}
-//                 >
-//                   {movie.title}
-//                 </li>
-//               ))}
-//             </ul>
-//           )}
-//         </div>
-//       </div>
-//     </header>
-//     <Outlet/>
-    
-//     </>
-//   );
-// };
-
-// export default Header;
-
-
-
-
 import React, { useState, useEffect } from "react";
 import logo from "../assets/logo.png";
 import { useNavigate } from "react-router-dom";
@@ -190,9 +110,9 @@ const Header = () => {
             </div>
           </div>
         </header>
-
+       <Outlet/>
         <Movie filters={{ genre, year, rating }} />
-      
+        
       </div>
     </>
   );