From 874e496526bc7e6e904641777cc454e33332bba0 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sat, 12 Dec 2020 17:53:26 +1300
Subject: [PATCH] component: add Modal component

---
 src/components/UI/Modal/Modal.css             | 20 +++++++++++++++++++
 src/components/UI/Modal/Modal.js              | 13 ++++++++++++
 src/containers/BurgerBuilder/BurgerBuilder.js |  2 ++
 3 files changed, 35 insertions(+)
 create mode 100644 src/components/UI/Modal/Modal.css
 create mode 100644 src/components/UI/Modal/Modal.js

diff --git a/src/components/UI/Modal/Modal.css b/src/components/UI/Modal/Modal.css
new file mode 100644
index 0000000..2c80ff8
--- /dev/null
+++ b/src/components/UI/Modal/Modal.css
@@ -0,0 +1,20 @@
+.Modal {
+    position: fixed;
+    z-index: 500;
+    background-color: white;
+    width: 70%;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px black;
+    padding: 16px;
+    left: 15%;
+    top: 30%;
+    box-sizing: border-box;
+    transition: all 0.3s ease-out;
+}
+
+@media (min-width: 600px) {
+    .Modal {
+        width: 500px;
+        left: calc(50% - 250px);
+    }
+}
\ No newline at end of file
diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js
new file mode 100644
index 0000000..e4b40f9
--- /dev/null
+++ b/src/components/UI/Modal/Modal.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import classes from './Modal.css';
+
+const modal = (props) => {
+    return (
+        <div className={classes.Modal}>
+            {props.children}
+        </div>
+    );
+};
+
+export default modal;
\ No newline at end of file
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
index f0f982a..db4fa60 100644
--- a/src/containers/BurgerBuilder/BurgerBuilder.js
+++ b/src/containers/BurgerBuilder/BurgerBuilder.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Aux from '../../hoc/Auxiliary';
 import Burger from '../../components/Burger/Burger';
 import BuildControls from '../../components/Burger/BuildControls/BuildControls';
+import Modal from '../../components/UI/Modal/Modal';
 
 const INGREDIENT_PRICE = {
     salad: 0.4,
@@ -86,6 +87,7 @@ class BurgerBuilder extends Component {
 
         return (
             <Aux>
+                <Modal />
                 <Burger ingredients={this.state.ingredients}  />
                 <BuildControls 
                     ingredientAdded={this.addIngredientHandler}