From 3896c1be0d295835c2b10974e22c2cffdcc05006 Mon Sep 17 00:00:00 2001
From: oscar <oscarzhou0727@icloud.com>
Date: Sat, 18 Mar 2023 12:41:44 +1300
Subject: [PATCH] add modal component

---
 public/index.html                  |  1 +
 src/App.js                         |  2 ++
 src/components/Cart/Cart.js        |  5 ++--
 src/components/UI/Modal.js         | 30 ++++++++++++++++++++++
 src/components/UI/Modal.module.css | 40 ++++++++++++++++++++++++++++++
 5 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/components/UI/Modal.js
 create mode 100644 src/components/UI/Modal.module.css
diff --git a/public/index.html b/public/index.html
index aa069f2..0aa3cae 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,6 +28,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root-overlays"></div>
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/src/App.js b/src/App.js
index 08d0a73..8325f48 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,10 +2,12 @@ import React from "react";
 
 import Header from "./components/Layout/Header";
 import Meals from "./components/Meals/Meals";
+import Cart from "./components/Cart/Cart";
 
 const App = () => {
   return (
     <>
+      <Cart />
       <Header />
       <main>
         <Meals />
diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js
index 43414a4..9afe23e 100644
--- a/src/components/Cart/Cart.js
+++ b/src/components/Cart/Cart.js
@@ -1,4 +1,5 @@
 import classes from "./Cart.module.css";
+import Modal from "../UI/Modal";
 
 const Cart = (props) => {
   const cartItems = (
@@ -10,7 +11,7 @@ const Cart = (props) => {
   );
 
   return (
-    <div>
+    <Modal>
       {cartItems}
       <div className={classes.total}>
         <span>Total Amount</span>
@@ -20,7 +21,7 @@ const Cart = (props) => {
         <button className={classes["button--alt"]}>Close</button>
         <button className={classes.button}>Order</button>
       </div>
-    </div>
+    </Modal>
   );
 };
 
diff --git a/src/components/UI/Modal.js b/src/components/UI/Modal.js
new file mode 100644
index 0000000..cc5e9ea
--- /dev/null
+++ b/src/components/UI/Modal.js
@@ -0,0 +1,30 @@
+import classes from "./Modal.module.css";
+import ReactDOM from "react-dom";
+
+const Backdrop = (props) => {
+  return <div className={classes.backdrop}></div>;
+};
+
+const ModalOverlay = (props) => {
+  return (
+    <div className={classes.modal}>
+      <div className={classes.content}>{props.children}</div>
+    </div>
+  );
+};
+
+const portalElement = document.getElementById("root-overlays");
+
+const Modal = (props) => {
+  return (
+    <>
+      {ReactDOM.createPortal(<Backdrop />, portalElement)}
+      {ReactDOM.createPortal(
+        <ModalOverlay>{props.children}</ModalOverlay>,
+        portalElement
+      )}
+    </>
+  );
+};
+
+export default Modal;
diff --git a/src/components/UI/Modal.module.css b/src/components/UI/Modal.module.css
new file mode 100644
index 0000000..ed1d794
--- /dev/null
+++ b/src/components/UI/Modal.module.css
@@ -0,0 +1,40 @@
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 20;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.modal {
+  position: fixed;
+  top: 20vh;
+  left: 5%;
+  width: 90%;
+  background-color: white;
+  padding: 1rem;
+  border-radius: 14px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  z-index: 30;
+  animation: slide-down 300ms ease-out forwards;
+}
+
+@media (min-width: 768px) {
+  .modal {
+    width: 40rem;
+    left: calc(50% - 20rem);
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
\ No newline at end of file
