From bd28f11b5928e6cae85b7b38b4ace22b923bbe8c Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrel@tyrelsouza.com>
Date: Mon, 26 Sep 2022 11:23:24 -0400
Subject: [PATCH] overlay

---
 ordering/public/index.html                    |  1 +
 ordering/src/App.js                           |  3 ++
 ordering/src/components/Cart/Cart.js          | 31 +++++++++++++++++++
 ordering/src/components/UI/Modal.js           | 30 ++++++++++++++++++
 .../src/components/{ => UI}/Modal.module.css  |  0
 5 files changed, 65 insertions(+)
 create mode 100644 ordering/src/components/Cart/Cart.js
 create mode 100644 ordering/src/components/UI/Modal.js
 rename ordering/src/components/{ => UI}/Modal.module.css (100%)
diff --git a/ordering/public/index.html b/ordering/public/index.html
index aa069f2..115a5fd 100644
--- a/ordering/public/index.html
+++ b/ordering/public/index.html
@@ -28,6 +28,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="overlays"></div>
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/ordering/src/App.js b/ordering/src/App.js
index 2cbe7bb..abc6b69 100644
--- a/ordering/src/App.js
+++ b/ordering/src/App.js
@@ -1,8 +1,11 @@
 import Header from "./components/Layout/Header"
 import Meals from "./components/Meals/Meals"
+import Cart from "./components/Cart/Cart"
+
 function App() {
     return (
         <>
+            <Cart />
             <Header />
             <main>
                 <Meals />
diff --git a/ordering/src/components/Cart/Cart.js b/ordering/src/components/Cart/Cart.js
new file mode 100644
index 0000000..1bf845b
--- /dev/null
+++ b/ordering/src/components/Cart/Cart.js
@@ -0,0 +1,31 @@
+import React from "react"
+import classes from "./Cart.module.css"
+import Modal from "../UI/Modal"
+
+function Cart(props) {
+    const cartItems = (
+        <ul className={classes["cart-items"]}>
+            {[{ id: "c1", name: "Sushi", amount: 2, price: 12.99 }].map(
+                (item) => (
+                    <li>{item.name}</li>
+                )
+            )}
+        </ul>
+    )
+
+    return (
+        <Modal>
+            {cartItems}
+            <div className={classes.total}>
+              <span>Total Amount</span>
+              <span>35.62</span>
+            </div>
+            <div className={classes.actions}>
+              <button className={classes['button--alt']}>Close</button>
+              <button className={classes.button}>Order</button>
+            </div>
+        </Modal>
+    )
+}
+
+export default Cart
diff --git a/ordering/src/components/UI/Modal.js b/ordering/src/components/UI/Modal.js
new file mode 100644
index 0000000..8f979f7
--- /dev/null
+++ b/ordering/src/components/UI/Modal.js
@@ -0,0 +1,30 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import classes from "./Modal.module.css"
+
+const Backdrop = (props) => {
+    return <div className={classes.backdrop} />
+}
+const ModalOverlay = (props) => {
+    return (
+        <div className={classes.modal}>
+            <div className={classes.content}>{props.children}</div>
+        </div>
+    )
+}
+
+const portalElement = document.getElementById("overlays")
+
+function Modal(props) {
+    return (
+        <>
+            {ReactDOM.createPortal(<Backdrop />, portalElement)}
+            {ReactDOM.createPortal(
+                <ModalOverlay>{props.children}</ModalOverlay>,
+                portalElement
+            )}
+        </>
+    )
+}
+
+export default Modal
diff --git a/ordering/src/components/Modal.module.css b/ordering/src/components/UI/Modal.module.css
similarity index 100%
rename from ordering/src/components/Modal.module.css
rename to ordering/src/components/UI/Modal.module.css
