tyrel
/
udemy-react-course
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

overlay

This commit is contained in:
Tyrel Souza 2022-09-26 11:23:24 -04:00
parent 0945ab2e2f
commit bd28f11b59
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
5 changed files with 65 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ordering/public/index.html
View File

@ -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.

3
ordering/src/App.js
View File

@ -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 />

31
ordering/src/components/Cart/Cart.js Normal file
View File

@ -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

30
ordering/src/components/UI/Modal.js Normal file
View File

@ -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

0
ordering/src/components/Modal.module.css → ordering/src/components/UI/Modal.module.css
View File