Implementation of Burger Builder Container

README.md

@@ -14,3 +14,4 @@ NOTE: There can be more additions into the design, over iterations of the Applic
 
 0. Layout, Component & State Design: **[View](https://codepen.io/ch-sriram/full/JjXPbEe)**
 1. Creating a Layout Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/0187377958254ea601fcfb9c6b5c5d5e39bbc484)
+2. Initiating the implementation of Burger Builder Container: [Commit Details]();

package.json

@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -2,14 +2,15 @@
 import React, { Component } from 'react';
 
 // Our Components
-import Layout from './components/Layout/layout.component';
+import Layout from './components/Layout/Layout.component';
+import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder.component';
 
 class App extends Component {
   render() {
     return (
       <div>
         <Layout>
-          <p>Test</p>
+          <BurgerBuilder />
         </Layout>
       </div>
     );

src/components/Layout/Layout.module.css

@@ -0,0 +1,3 @@
+.Content {
+  margin-top: 16px;
+}

src/components/Layout/layout.component.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import Aux from '../../hoc/Auxiliary/auxiliary.hoc';
+import Aux from '../../hoc/Auxiliary/Auxiliary.hoc';
+import classes from './Layout.module.css';
 
 const layout = props => {
   return (
     <Aux>
       <div>Toolbar, SideDrawer, Backdrop</div>
-      <main>
+      <main className={classes.Content}>
         {props.children}
       </main>
     </Aux>

src/containers/BurgerBuilder/BurgerBuilder.component.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import Aux from '../../hoc/Auxiliary/Auxiliary.hoc';
+
+class BurgerBuilder extends Component {
+  render() {
+    return (
+      <Aux>
+        <div>Burger</div>
+        <div>Build Controls</div>
+      </Aux>
+    );
+  }
+}
+
+export default BurgerBuilder;