created modal

AnmolTutejaGitHub · Sep 24, 2024 · d3a4dfd · d3a4dfd
1 parent 80f7f25
commit d3a4dfd
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 7 deletions.
diff --git a/src/App/App.css b/src/App/App.css
@@ -2,4 +2,38 @@ body {
     background-color: black;
     color: white;
     font-family: sans-serif;
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    max-width: 80vw;
+    max-height: 80vh;
+    overflow-y: auto;
+    position: relative;
+}
+
+.close-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
 }
diff --git a/src/App/App.js b/src/App/App.js
@@ -9,13 +9,19 @@ import TopRated from "../Components/TopRated/TopRated";
 import Genre from "../Components/Genre/Genre";
 import Footer from "../Components/Footer/Footer";
 import HeaderMovies from "../Components/HeaderMovies/HeaderMovies";
+import { IoClose } from "react-icons/io5";
 
 function App() {
     const [selectedMovie, SetSelectedMovie] = useState(null);
 
     function GetSelectedMovie(movie) {
         SetSelectedMovie(movie);
     }
+
+    function closeModal() {
+        SetSelectedMovie(null);
+    }
+
     return (
         <div>
             <div className="landing-page">
@@ -42,14 +48,16 @@ function App() {
                 <Footer />
             </div>
 
-
-            {/* I have to route openmovies  */}
-            {selectedMovie && <OpenMovie selectedMovie={selectedMovie} />}
-
-
-
-
+            {selectedMovie && (
+                <div className="modal-overlay" onClick={closeModal}>
+                    <div className="modal-content" >
+                        <OpenMovie selectedMovie={selectedMovie} />
+                        <IoClose className="close-button" onClick={closeModal} />
+                    </div>
+                </div>
+            )}
         </div>
     );
 }
+
 export default App;