From 0d456766b0ce927b0b6db2b49ab8e1c7eab9649a Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Wed, 9 Dec 2020 21:05:37 +1300
Subject: [PATCH] component: add BurgerIngredient into Burger component

---
 src/components/Burger/Burger.css              | 31 +++++++++++++++++++
 src/components/Burger/Burger.js               | 17 ++++++++++
 .../BurgerIngredient/BurgerIngredient.js      |  4 +--
 src/containers/BurgerBuilder/BurgerBuilder.js |  7 +++--
 4 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Burger/Burger.css
 create mode 100644 src/components/Burger/Burger.js

diff --git a/src/components/Burger/Burger.css b/src/components/Burger/Burger.css
new file mode 100644
index 0000000..8a7f563
--- /dev/null
+++ b/src/components/Burger/Burger.css
@@ -0,0 +1,31 @@
+.Burger {
+    width: 100%;
+    margin: auto;
+    height: 250px;
+    overflow: scroll;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
+
+@media (min-width: 400px) and (min-height: 400px) {
+    .Burger {
+        width: 350px;
+        height: 300px;
+    }
+}
+
+@media (min-width: 500px) and (min-height: 401px) {
+    .Burger {
+        width: 450px;
+        height: 400px;
+    }
+}
+
+@media (min-width: 1000px) and (min-height: 700px) {
+    .Burger {
+        width: 700px;
+        height: 600px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Burger/Burger.js b/src/components/Burger/Burger.js
new file mode 100644
index 0000000..634fa55
--- /dev/null
+++ b/src/components/Burger/Burger.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+import classes from './Burger.css';
+import BurgerIngredient from './BurgerIngredient/BurgerIngredient';
+
+const burger = () => {
+    return (
+        <div className={classes.Burger}>
+            <BurgerIngredient type="bread-top" />
+            <BurgerIngredient type="meat" />
+            <BurgerIngredient type="cheese" />
+            <BurgerIngredient type="bread-bottom" />
+        </div>
+    )
+}
+
+export default burger;
\ No newline at end of file
diff --git a/src/components/Burger/BurgerIngredient/BurgerIngredient.js b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
index 0c3cb6a..0894688 100644
--- a/src/components/Burger/BurgerIngredient/BurgerIngredient.js
+++ b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import classes from './burgerIngredient.css';
+import classes from './BurgerIngredient.css';
 
 class BurgerIngredient extends Component {
     render() {
@@ -43,4 +43,4 @@ BurgerIngredient.PropTypes = {
     type: PropTypes.string.isRequired
 };
 
-export default burgerIngredient;
\ No newline at end of file
+export default BurgerIngredient;
\ No newline at end of file
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
index e9aa99e..b0bc4fa 100644
--- a/src/containers/BurgerBuilder/BurgerBuilder.js
+++ b/src/containers/BurgerBuilder/BurgerBuilder.js
@@ -1,17 +1,18 @@
 import React, { Component } from 'react';
 
 import Aux from '../../hoc/Auxiliary';
+import Burger from '../../components/Burger/Burger';
 
 class BurgerBuilder extends Component {
 
     render() {
         return (
             <Aux>
-                <div>Burger</div>
+                <Burger />
                 <div>Build Controls</div>
             </Aux>
         );
-    }
-}
+    };
+};
 
 export default BurgerBuilder;