component: add BuildControls and BuildControl component

src/components/BuildControls/BuildControl/BuildControl.css

@@ -0,0 +1,56 @@
+.BuildControl {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 5px 0;
+}
+
+.BuildControl button {
+    display: block;
+    font: inherit;
+    padding: 5px;
+    margin: 0 5px;
+    width: 80px;
+    border: 1px solid #AA6817;
+    cursor: pointer;
+    outline: none;
+}
+
+.BuildControl button:disabled {
+    background-color: #AC9980;
+    border: 1px solid #7E7365;
+    color: #ccc;
+    cursor: default;
+}
+
+.BuildControl button:hover:disabled {
+    background-color: #AC9980;
+    color: #ccc;
+    cursor: not-allowed;
+}
+
+.Label {
+    padding: 10px;
+    font-weight: bold;
+    width: 80px;
+}
+
+.BuildControl .Less {  
+    background-color: #D39952;
+    color: white;
+}
+
+.BuildControl .More {
+    background-color: #8F5E1E;
+    color: white;
+}
+
+.BuildControl .Less:hover, .BuildControl .Less:active {  
+    background-color: #DAA972;
+    color: white;
+}
+
+.BuildControl .More:hover,.BuildControl .More:active {
+    background-color: #99703F;
+    color: white;
+}

src/components/BuildControls/BuildControl/BuildControl.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import classes from './BuildControl.css';
+
+const buildControl = (props) => (
+    <div className={classes.BuildControl}>
+        <div className={classes.Label}>{props.Name}</div>
+        <button className={classes.Less}>Less</button>
+        <button className={classes.More}>More</button>
+    </div>
+)
+
+export default buildControl;

src/components/BuildControls/BuildControls.css

@@ -0,0 +1,10 @@
+.BuildControls {
+    width: 100%;
+    background-color: #CF8F2E;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    box-shadow: 0 2px 1px #ccc;
+    margin: auto;
+    padding: 10px 0;
+}

src/components/BuildControls/BuildControls.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import BuildControl from './BuildControl/BuildControl';
+import classes from './BuildControls.css';
+
+const buildControls = (props) => (
+    <div className={classes.buildControls}>
+        <BuildControl Name="Meat" />
+        <BuildControl Name="Cheese" />
+        <BuildControl Name="Salad" />
+        <BuildControl Name="Bacon" />
+    </div>
+)
+
+export default buildControls;

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import Aux from '../../hoc/Auxiliary';
 import Burger from '../../components/Burger/Burger';
+import BuildControls from '../../components/BuildControls/BuildControls';
 
 class BurgerBuilder extends Component {
 
@@ -18,7 +19,7 @@ class BurgerBuilder extends Component {
         return (
             <Aux>
                 <Burger ingredients={this.state.ingredients}  />
-                <div>Build Controls</div>
+                <BuildControls />
             </Aux>
         );
     };