Add search feature

.env

@@ -0,0 +1 @@
+VITE_API_KEY=531687c8e8da8cb3eb85ddce1090cec8

package.json

@@ -21,6 +21,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "prettier": "^3.5.3",
     "vite": "^5.2.0"
   }
 }

src/App.css

@@ -1,28 +1,108 @@
 .App {
   text-align: center;
-}
+  min-width: 700px;
 
-.App-header {
+
+ }
+
+
+ .App-header {
   background-color: #282c34;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-  color: white;
   padding: 20px;
-}
+  padding-bottom: 50px;
+
+ }
+
 
-@media (max-width: 600px) {
+ @media (max-width: 600px) {
   .movie-card {
     width: 100%;
   }
 
-  .search-bar {
-    flex-direction: column;
-    gap: 10px;
-  }
 
-  .search-bar form {
-    flex-direction: column;
-  }
-}
+ }
+ /* .search-bar {
+  display: inline;
+  width: 30%;
+
+
+
+
+ } */
+
+
+
+
+ /* .search-bar form {
+  flex-direction: column;
+ } */
+
+
+ /* input{
+  width: 70%;
+
+
+
+
+ } */
+
+
+ button{
+  width: 30%;
+ }
+
+
+ .movie-container{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding: 10px;
+  border: 3px solid blue;
+  height: 100%;
+  /* background: linear-gradient(to right, blue, black); */
+
+ }
+
+
+ .App-footer{
+  justify-content: center;
+  display: flex;
+  border: 3px solid red;
+  height: 100%;
+  width: 100%;
+
+
+
+
+ }
+
+
+ .title{
+  color: white
+
+
+ }
+
+
+ .controls-row{
+  display: flex;
+  justify-content:space-between;
+ }
+
+
+ .search-section{
+  margin-right: 80px;
+ }
+
+
+ .load-more button{
+  width: 15%;
+  height: 7vh;
+  border-radius: 10px;
+  background-color: green;
+ }
+
+ .load-more{
+  background: linear-gradient(to right, blue, black);
+
+ }

src/App.jsx

@@ -1,12 +1,65 @@
-import { useState } from 'react'
 import './App.css'
+import Search from './Search.jsx'
+import Sort from './Sort.jsx'
+import MovieList from './MovieList.jsx'
+import {useState} from 'react'
 
-const App = () => {
-  return (
-    <div className="App">
-
-    </div>
-  )
+
+function App() {
+  const [page, setPage] = useState(1)
+
+  const [searchTerm, setSearchTerm] = useState('')
+
+  function increasePageNumber() {
+    setPage(page + 1)
+  }
+
+  function handleSearch(term) {
+    setPage(1)
+    setSearchTerm(term)
+  }
+
+ return (
+   <div className="App">                           
+     <header className="App-header">
+       <h1 className='title'>🎥 Flixster</h1>
+
+
+     <div className='controls-row'>
+       <Search onSearch = {handleSearch}/>
+       <Sort/>
+     </div>
+
+
+     </header>
+
+
+     <main>
+       <div className='movie-container'>
+         <MovieList page = {page} searchTerm={searchTerm}/>
+       </div>
+       <div className='load-more'>
+         <button onClick={increasePageNumber}>Load More</button>
+         <p>Page {page}</p>
+
+
+       </div>
+
+
+     </main>
+
+
+
+
+     <footer>
+       <div className='App-footer'>
+         <p>Footer</p>
+       </div>
+     </footer>
+
+
+   </div>
+ )
 }
 
-export default App
+export default App;

src/Modal.css

@@ -0,0 +1,112 @@
+.modal-overlay {
+   position: fixed;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   background-color: rgba(0, 0, 0, 0.75);
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   z-index: 1000;
+   overflow-y: auto;
+   padding: 20px;
+ }
+
+ .modal-content {
+   background-color: #141414;
+   border-radius: 8px;
+   width: 90%;
+   max-width: 800px;
+   max-height: 90vh;
+   overflow-y: auto;
+   position: relative;
+   color: white;
+   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+ }
+
+ .modal-close {
+   position: absolute;
+   top: 10px;
+   right: 10px;
+   background: rgba(0, 0, 0, 0.5);
+   border: none;
+   color: white;
+   font-size: 24px;
+   width: 30px;
+   height: 30px;
+   border-radius: 50%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   cursor: pointer;
+   z-index: 10;
+ }
+
+ .modal-backdrop {
+   height: 300px;
+   background-size: cover;
+   background-position: center top;
+   position: relative;
+ }
+
+ .modal-backdrop-overlay {
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 100%);
+ }
+
+ .modal-body {
+   padding: 20px;
+   position: relative;
+   margin-top: -60px;
+ }
+
+ .modal-info {
+   display: flex;
+   flex-wrap: wrap;
+   gap: 15px;
+   margin-bottom: 20px;
+ }
+
+ .modal-info p {
+   margin: 0;
+ }
+
+ .modal-overview {
+   margin-bottom: 20px;
+ }
+
+ .modal-overview h3 {
+   margin-bottom: 10px;
+ }
+
+ .trailer-container {
+   position: relative;
+   padding-bottom: 56.25%; /* 16:9 aspect ratio */
+   height: 0;
+   overflow: hidden;
+   margin-top: 10px;
+ }
+
+ .trailer-container iframe {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   border-radius: 4px;
+ }
+
+ /* Make movie cards clickable */
+ .card-content {
+   cursor: pointer;
+   transition: transform 0.2s;
+ }
+
+ .card-content:hover {
+   transform: scale(1.05);
+ }