moved the search box from homepage to navigation bar

package.json

@@ -45,9 +45,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "babel-preset-react-app": "^10.0.1",
-
     "html5-qrcode": "^2.3.8",
     "tailwindcss": "^3.4.13"
-
   }
-}
+}

src/Pages/Home.js

@@ -5,7 +5,7 @@ import { getAuth, onAuthStateChanged } from "firebase/auth";
 import Footer from '../components/Footer';
 import Search from '../components/Search';
 
-const Home = () => {
+const Home = ({setTotalMovies}) => {
   const firebase = useFirebase();
   const [allMovies, setAllMovies] = useState([]);
   const [posterPaths, setPosterPaths] = useState({});
@@ -54,6 +54,7 @@ const Home = () => {
       try {
         const movies = await firebase.fetchAllMovies();
         setAllMovies(movies);
+        setTotalMovies(movies);
         setFilteredMovies(movies); // Initialize with all movies
         // Fetch poster paths for all movies
         const paths = await Promise.all(movies.map(movie => firebase.fetchMoviePoster(movie.movieId)));
@@ -74,9 +75,9 @@ const Home = () => {
 
   return (
     <div className='dark:bg-slate-900'>
-      <div className='pt-[7vh] grid place-items-center'>
-        <Search movies={allMovies} />
-      </div>
+
+      {/* removed search box from home and added it to navbar */}
+
 
       {/* Genre Filter Buttons */}
       <div className="flex justify-center my-5 ">

src/components/Navbar.js

@@ -5,8 +5,9 @@ import useThemeSwitcher from './useThemeSwitcher';
 import { getAuth, onAuthStateChanged, signOut } from 'firebase/auth';
 import {  FiMoon, FiSun } from 'react-icons/fi';
 import './Navbar.css';
+import Search from './Search';
 
-export default function Navbar() {
+export default function Navbar({totalMovies}) {
     const firebase = useFirebase();  
     const auth = getAuth(); 
     const detailsRef = useRef(null); 
@@ -83,7 +84,7 @@ export default function Navbar() {
             <nav className="nav">
                 <a href="/" className="logo">Ticketify</a>
 
-
+                <Search totalMovies={totalMovies} />
                 <ul className="nav-links ">
                     <li >
                       <NavLink

src/components/Search.css

@@ -1,15 +1,19 @@
 .search-wrapper{
     position: relative;
-    width: 70vw;
+    display: flex;
+    width: 35%;
 }
 
 .search-input{
     width: 100%;
-    display: flex;
-    background-color: #f6f6f6;
-    padding: 1rem 2rem;
-    font-size: 1.2rem;
-    box-shadow: 2px 2px 10px #dadada70;
+    padding-left: 12px;  
+    padding-right: 12px; 
+    padding-top: 8px;    
+    padding-bottom: 8px; 
+    border-radius: 9999px 0 0 9999px; 
+    border-width: 2px;  
+    border-color: #d1d5db;
+    border-style: solid; 
 }
 
 .search-input input{
@@ -32,6 +36,7 @@
     background-color: #f6f6f6;
     backdrop-filter: blur(10px);
     color: #727272;
+    border-radius: 1rem;
 }
 
 .search-suggestion .suggestion-item{
@@ -58,4 +63,14 @@
     color: #dadada;
     font-size: 1.5rem;
     font-weight: 600;
+}
+.search-btn{
+    padding-left: 16px;   
+    padding-right: 16px;  
+    padding-top: 8px;     
+    padding-bottom: 8px;  
+    border-radius: 0 9999px 9999px 0; 
+    background-color: transparent; 
+    border: 2px solid #d1d5db;
+    border-left: none;
 }