From 66f5fb63f929dfa194b1507f95a6b3fdead66f74 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Wed, 9 Dec 2020 20:13:43 +1300
Subject: [PATCH] component: add BurgerIngredient component

---
 .../BurgerIngredient/BurgerIngredient.css     | 113 ++++++++++++++++++
 .../BurgerIngredient/BurgerIngredient.js      |  39 ++++++
 2 files changed, 152 insertions(+)
 create mode 100644 src/components/Burger/BurgerIngredient/BurgerIngredient.css
 create mode 100644 src/components/Burger/BurgerIngredient/BurgerIngredient.js

diff --git a/src/components/Burger/BurgerIngredient/BurgerIngredient.css b/src/components/Burger/BurgerIngredient/BurgerIngredient.css
new file mode 100644
index 0000000..ed3931e
--- /dev/null
+++ b/src/components/Burger/BurgerIngredient/BurgerIngredient.css
@@ -0,0 +1,113 @@
+.BreadBottom {
+    height: 13%;
+    width: 80%;
+    background: linear-gradient(#F08E4A, #e27b36);
+    border-radius: 0 0 30px 30px;
+    box-shadow: inset -15px 0 #c15711;
+    margin: 2% auto;
+}
+
+.BreadTop {
+    height: 20%;
+    width: 80%;
+    background: linear-gradient(#bc581e, #e27b36);
+    border-radius: 50% 50% 0 0;
+    box-shadow: inset -15px 0 #c15711;
+    margin: 2% auto;
+    position: relative;
+}
+
+.Seeds1 {
+    width: 10%;
+    height: 15%;
+    position: absolute;
+    background-color: white;
+    left: 30%;
+    top: 50%;
+    border-radius: 40%;
+    transform: rotate(-20deg);
+    box-shadow: inset -2px -3px #c9c9c9;
+}
+
+.Seeds1:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: white;
+    left: -170%;
+    top: -260%;
+    border-radius: 40%;
+    transform: rotate(60deg);
+    box-shadow: inset -1px 2px #c9c9c9;
+  }
+  
+.Seeds1:before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: white;
+    left: 180%;
+    top: -50%;
+    border-radius: 40%;
+    transform: rotate(60deg);
+    box-shadow: inset -1px -3px #c9c9c9;
+  }
+
+  .Seeds2 {
+    width: 10%;
+    height: 15%;
+    position: absolute;
+    background-color: white;
+    left: 64%;
+    top: 50%;
+    border-radius: 40%;
+    transform: rotate(10deg);
+    box-shadow: inset -3px 0 #c9c9c9;
+  }
+  
+  .Seeds2:before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: white;
+    left: 150%;
+    top: -130%;
+    border-radius: 40%;
+    transform: rotate(90deg);
+    box-shadow: inset 1px 3px #c9c9c9;
+  }
+  
+
+.Meat {
+    width: 80%;
+    height: 8%;
+    background: linear-gradient(#7f3608, #702e05);
+    margin: 2% auto;
+    border-radius: 15px;
+}
+
+.Cheese {
+    width: 90%;
+    height: 4.5%;
+    margin: 2% auto;
+    background: linear-gradient(#f4d004, #d6bb22);
+    border-radius: 20px;
+}
+
+.Salad {
+    width: 85%;
+    height: 7%;
+    margin: 2% auto;
+    background: linear-gradient(#228c1d, #91ce50);
+    border-radius: 20px;
+}
+
+.Bacon {
+    width: 80%;
+    height: 3%;
+    background: linear-gradient(#bf3813, #c45e38);
+    margin: 2% auto;
+}
diff --git a/src/components/Burger/BurgerIngredient/BurgerIngredient.js b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
new file mode 100644
index 0000000..8dfa7ba
--- /dev/null
+++ b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import classes from './burgerIngredient.css';
+
+const burgerIngredient = (props) => {
+    let ingredient = null;
+
+    switch (props.type) {
+        case ('bread-bottom'):
+            ingredient = <div className={classes.BreadBottom}></div>
+            break;
+        case ('bread-top'):
+            ingredient = (
+                <div className={classes.BreadTop}>
+                    <div className={classes.Seeds1}></div>
+                    <div className={classes.Seeds2}></div>
+                </div>
+            )
+            break;
+        case ('meat'):
+            ingredient = <div className={classes.Meat}></div>
+            break;
+        case ('cheese'):
+            ingredient = <div className={classes.Cheese}></div>
+            break;
+        case ('salad'):
+            ingredient = <div className={classes.Salad}></div>
+            break;
+        case ('bacon'):
+            ingredient = <div className={classes.Bacon}></div>
+            break;
+        default:
+            ingredient = null;
+            break;
+    }
+
+    return ingredient;
+}
+
+export default burgerIngredient;
\ No newline at end of file