Dynamic Ingredient Component <BurgerIngredient/>

Ch-sriram · Aug 3, 2020 · c0df741 · c0df741
1 parent 3fbfc1e
commit c0df741
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 0 deletions.
diff --git a/src/components/Burger/Burger.component.jsx b/src/components/Burger/Burger.component.jsx
diff --git a/src/components/Burger/BurgerIngredient/BurgerIngredient.component.jsx b/src/components/Burger/BurgerIngredient/BurgerIngredient.component.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { BreadBottom, BreadTop, Salad, Bacon, Meat, Cheese } from './BurgerIngredient.styled';
+
+
+const burgerIngredient = props => {
+  let ingredient = null;
+
+  switch (props.type) {
+    case 'bread-top':
+      ingredient = <BreadTop className="seeds seeds2" />; break;
+    case 'bread-bottom': ingredient = BreadBottom; break;
+    case 'bacon': ingredient = Bacon; break;
+    case 'salad': ingredient = Salad; break;
+    case 'meat': ingredient = Meat; break;
+    case 'cheese': ingredient = Cheese; break;
+    default: ingredient = null; break;
+  }
+
+  return ingredient;
+};
+
+export default burgerIngredient;
diff --git a/src/components/Burger/BurgerIngredient/BurgerIngredient.styled.jsx b/src/components/Burger/BurgerIngredient/BurgerIngredient.styled.jsx
@@ -0,0 +1,114 @@
+import styled from 'styled-components';
+
+export const BreadTop = styled.div`
+  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;
+
+  & .seeds {
+    position: absolute;
+    width: 10%;
+    height: 15%;
+    background-color: white;
+    left: 30%;
+    top: 50%;
+    border-radius: 40%;
+    transform: rotate(-20deg);
+    box-shadow: inset -2px -3px #c9c9c9;
+  }
+
+  & .seeds::after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: white;
+    left: -170%;
+    top: -260%;
+    border-radius: 40%;
+    transform: rotate(20deg);
+    box-shadow: inset -1px 2px #c9c9c9;
+  }
+
+  & .seeds::before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: white;
+    left: 180%;
+    top: -50%;
+    border-radius: 40%;
+    transform: rotate(20deg);
+    box-shadow: inset -1px -3px #c9c9c9;
+  }
+
+  & .seeds2 {
+    position: absolute;
+    width: 10%;
+    height: 15%;
+    background-color: white;
+    left: 64%;
+    top: 50%;
+    border-radius: 40%;
+    transform: rotate(10deg);
+    box-shadow: inset -3px 0 #c9c9c9;
+  }
+
+  & .seeds2::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    left: 150%;
+    top: -130%;
+    border-radius: 40%;
+    transform: rotate(90deg);
+    box-shadow: inset 1px 3px #c9c9c9;
+  }
+`;
+
+export const BreadBottom = styled.div`
+  width: 80%;
+  height: 13%;
+  background: linear-gradient(#f08e4a, #e27b36);
+  margin: 2% auto;
+  box-shadow: inset -15px 0 #c15711;
+  border-radius: 0 0 30px 30px;
+`;
+
+export const Meat = styled.div`
+  width: 82%;
+  height: 8%;
+  background: linear-gradient(#7f3608, #702e05);
+  margin: 2% auto;
+  border-radius: 15px;
+`;
+
+export const Cheese = styled.div`
+  width: 91%;
+  height: 4.5%;
+  background: linear-gradient(#f4d004, #d6bb22);
+  margin: 2% auto;
+  border-radius: 20px;
+`;
+
+export const Salad = styled.div`
+  width: 90%;
+  height: 7%;
+  background: linear-gradient(#228c1d, #91ce50);
+  margin: 2% auto;
+  border-radius: 20px;
+`;
+
+export const Bacon = styled.div`
+  width: 80%;
+  height: 3%;
+  background: linear-gradient(#bf3813, #c45e38);
+  margin: 2% auto;
+`;