oscar
/
food-order-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add modal component

main
oscar 2023-03-18 12:41:44 +13:00
parent 3a2a44d828
commit 3896c1be0d
5 changed files with 76 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

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

2
src/App.js
View File

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

5
src/components/Cart/Cart.js
View File

@ -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>
);
};

30
src/components/UI/Modal.js 100644
View File

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

40
src/components/UI/Modal.module.css 100644
View File

@ -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);
}
}