overlay

2022-09-26 11:23:24 -04:00 · 2022-09-26 11:23:24 -04:00 · bd28f11b59
commit bd28f11b59
parent 0945ab2e2f
5 changed files with 65 additions and 0 deletions
--- 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.
--- 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 />
--- a/ordering/src/components/Cart/Cart.js
+++ 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
--- a/ordering/src/components/UI/Modal.js
+++ 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
--- a/ordering/src/components/UI/Modal.module.css
+++ b/ordering/src/components/UI/Modal.module.css