Add SearchBar

src/App.css

@@ -2,6 +2,13 @@
   font-family: Roboto;
 }
 
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height:100vh;  
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

src/App.js

@@ -9,12 +9,14 @@ import { Outlet } from 'react-router-dom';
 
 import Navbar from './components/Navbar';
 import theme from './themes/theme';
+import SearchBar from './components/SearchBar';
 
 const App = () => {
   return (
     <ThemeProvider theme={theme}>
       <div className="App">
         <Navbar />
+        <SearchBar />
         <Outlet/>
       </div>
     </ThemeProvider>

src/components/Navbar.js

@@ -14,10 +14,30 @@ const navItems = [
   { text: 'About', link: '/about' }
 ];
 
-const Navbar = () => {
+
+
+const Navbar = (movies, setSearchResult) => {
+  // const handleSubmit = (e) => e.preventDefault()
+  // const handleSearchChange = (e) => {
+  //   if (!e.target.value) return setSearchResult(movies)
+
+  //   const resultArray = movies.filter(movie => 
+  //   movie.title.includes(e.target.value) || movie.body.includes(e.target.value))
+  //   setSearchResult(resultArray)}
   return (
     <Box sx={{ display: 'flex' }}>
       <AppBar>
+        {/* <form className='search' onSubmit={handleSubmit}>
+          <input className='searchInput'
+          type= "search"
+          id = "search"
+          onChange={handleSearchChange}
+          ></input>
+          <button className='searchButton'
+          color='black'>
+          Search
+          </button>
+        </form> */}
         <Toolbar>
           <MovieFilter sx={{ display: 'flex', mr: 1 }} />
           <Typography

src/components/SearchBar.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import AppBar from '@mui/material/AppBar';
+
+
+const SearchBar = (movies, setSearchResult) => {
+    const handleSubmit = (e) => e.preventDefault()
+    const handleSearchChange = (e) => {
+        if (!e.target.value) return setSearchResult(movies)
+
+        const resultArray = movies.filter(movie => 
+            movie.title.includes(e.target.value) || movie.body.includes(e.target.value))
+
+            setSearchResult(resultArray)
+    }
+  return (
+    <AppBar>
+        <form className='search' onSubmit={handleSubmit}>
+            <input className='searchInput'
+            type= "search"
+            id = "search"
+            onChange={handleSearchChange}>
+
+            </input>
+            <button className='searchButton'
+            color='black'>
+            Search
+            </button>
+        </form>
+    </AppBar>
+  )
+}
+
+export default SearchBar

src/containers/MovieList.js

@@ -41,6 +41,15 @@ const MovieList = () => {
         queryParams.set("page", page);
         setQueryParams(queryParams);
     }
+    const SearchMovie = ({searchResult}) => {
+        const result = searchResult.map(movie => <MovieCard key = {movie.title} movie = {movie} />)
+
+        const content = result?.lenght ? result : <article><p>NMo MAtching Posts</p></article>
+
+        return (
+            <main>{content}</main>
+        )
+    }
 
     return (
         <Box sx={{