From 77a69afbe990b19ad0b45b4c1517af8abbb0d081 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sat, 12 Dec 2020 21:58:19 +1300
Subject: [PATCH] component: add custom Button component

---
 .../Burger/OrderSummary/OrderSummary.js       |  3 +++
 src/components/UI/Button/Button.css           | 24 +++++++++++++++++++
 src/components/UI/Button/Button.js            | 12 ++++++++++
 src/containers/BurgerBuilder/BurgerBuilder.js |  9 ++++++-
 4 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 src/components/UI/Button/Button.css
 create mode 100644 src/components/UI/Button/Button.js

diff --git a/src/components/Burger/OrderSummary/OrderSummary.js b/src/components/Burger/OrderSummary/OrderSummary.js
index 9a49eda..697be2e 100644
--- a/src/components/Burger/OrderSummary/OrderSummary.js
+++ b/src/components/Burger/OrderSummary/OrderSummary.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Aux from '../../../hoc/Auxiliary';
+import Button from '../../UI/Button/Button';
 
 const orderSummary = (props) => {
     const ingredients = Object.keys(props.ingredients)
@@ -20,6 +21,8 @@ const orderSummary = (props) => {
                 {ingredients}
             </ul>
             <p>Continue to Checkout?</p>
+            <Button btnType="Danger" clicked={props.purchaseCancalled}>CANCEL</Button>
+            <Button btnType="Success" clicked={props.purchaseContinued}>CONTINUE</Button>
         </Aux>
     )
 };
diff --git a/src/components/UI/Button/Button.css b/src/components/UI/Button/Button.css
new file mode 100644
index 0000000..b51461e
--- /dev/null
+++ b/src/components/UI/Button/Button.css
@@ -0,0 +1,24 @@
+.Button {
+    background-color: transparent;
+    border: none;
+    color: white;
+    outline: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 10px;
+    margin: 10px;
+    font-weight: bold;
+}
+
+.Button:first-of-type {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.Success {
+    color: #5C9210;
+}
+
+.Danger {
+    color: #944317;
+}
\ No newline at end of file
diff --git a/src/components/UI/Button/Button.js b/src/components/UI/Button/Button.js
new file mode 100644
index 0000000..26c0630
--- /dev/null
+++ b/src/components/UI/Button/Button.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import classes from './Button.css';
+
+const button = (props) => {
+    return (
+        <button className={[classes.Button, classes[props.btnType]].join(' ')}
+            onClick={props.clicked}> { props.children}</button >
+    )
+}
+
+export default button;
\ No newline at end of file
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
index 3bc04dc..a1a55cc 100644
--- a/src/containers/BurgerBuilder/BurgerBuilder.js
+++ b/src/containers/BurgerBuilder/BurgerBuilder.js
@@ -86,6 +86,10 @@ class BurgerBuilder extends Component {
         this.setState({ purchasing: false });
     }
 
+    purchaseContinueHandler = () => {
+        alert("You continue");
+    }
+
     render() {
         const disabledInfo = {
             ...this.state.ingredients
@@ -100,7 +104,10 @@ class BurgerBuilder extends Component {
                 <Modal
                     show={this.state.purchasing}
                     modalClosed={this.purchaseCancelHandler}>
-                    <OrderSummary ingredients={this.state.ingredients}></OrderSummary>
+                    <OrderSummary
+                        ingredients={this.state.ingredients}
+                        purchaseCancalled={this.purchaseCancelHandler}
+                        purchaseContinued={this.purchaseContinueHandler}></OrderSummary>
                 </Modal>
                 <Burger ingredients={this.state.ingredients} />
                 <BuildControls