Added tabview component

package.json

@@ -26,7 +26,7 @@
   },
   "lint-staged": {
       "*.js": [
-      "prettier --write",
+      "prettier --single-quote --trailing-comma --write",
       "git add"
     ]
   }

src/components/App/App.css

@@ -9,7 +9,7 @@
 
 .App-header {
   background-color: #222;
-  height: 150px;
+  height: 100px;
   padding: 20px;
   color: white;
 }

src/components/Nav/NavLink.js

@@ -1,9 +1,11 @@
 // modules/NavLink.js
-import React from 'react'
-import { NavLink } from 'react-router-dom'
+import React from 'react';
+import { NavLink } from 'react-router-dom';
 
 export default React.createClass({
   render() {
-    return <NavLink {...this.props} activeStyle={{backgroundColor: "#111"}} />
-  }
-})
+    return (
+      <NavLink {...this.props} activeStyle={{ backgroundColor: '#111' }} />
+    );
+  },
+});

src/components/Nav/index.js

@@ -1,5 +1,7 @@
-import React from "react";
-import NavLink from "./NavLink";
+import React from 'react';
+import NavLink from './NavLink';
+
+import './style.css';
 
 const Nav = () =>
   <ul className="nav">

src/components/Nav/style.css

@@ -0,0 +1,35 @@
+.nav {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+    height: auto;
+}
+
+.nav li {
+    width: 100px;
+}
+
+.nav li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+/* Change the link color to #111 (black) on hover */
+.nav li a:hover {
+    background-color: #111;
+}
+
+@media  (max-width: 800px) {
+    .nav ul { 
+        height: auto;
+        width: 100vw;
+    }
+    .nav li {
+        float: left;
+    }
+}

src/components/Tabs/style.css

@@ -0,0 +1,22 @@
+
+.tab {
+	border-top: 1px solid black;
+	border-left: 1px solid black;
+	border-right: 1px solid black;
+	border-radius: 5px 5px 0 0;
+	background-color: grey;
+	padding: 10px;
+	margin-right: 5px;
+	color: white;
+	display: inline-block;
+}
+
+.tab.active {
+	background-color: #111;
+	box-shadow: 1px 2px 5px grey;
+}
+
+.tabContent {
+	padding: 10px 10px;
+	border: 1px solid black;
+}

src/components/Toggle/index.js

@@ -1,11 +1,11 @@
-import React from "react";
-import { Motion, spring } from "react-motion";
+import React from 'react';
+import { Motion, spring } from 'react-motion';
 
-import "./style.css";
+import './style.css';
 
 export default class Toggle extends React.Component {
   state = {
-    open: false
+    open: false,
   };
 
   handleClick = () => {
@@ -15,14 +15,14 @@ export default class Toggle extends React.Component {
   render() {
     return (
       <div>
-        <h2>
-          Try the toggole which controls the status and animation. The block
+        <p>
+          Try the toggle which controls the status and animation. The block
           itself is also clickable.
-        </h2>
+        </p>
         <button onClick={this.handleClick}>
           Toggle
         </button>
-        <h2>Status: {this.state.open ? "open" : "closed"}</h2>
+        <h3>Status: {this.state.open ? 'open' : 'closed'}</h3>
         <Motion style={{ x: spring(this.state.open ? 200 : 0) }}>
           {({ x }) =>
             <div className="toggle-bg">
@@ -30,7 +30,7 @@ export default class Toggle extends React.Component {
                 className="toggle-block"
                 onClick={this.handleClick}
                 style={{
-                  transform: `translate3d(${x}px, 0, 0)`
+                  transform: `translate3d(${x}px, 0, 0)`,
                 }}
               />
             </div>}

src/index.css

@@ -1,31 +1,33 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
+.container {
+	display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;  
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  height: 100%;
+}
+
+.App {
+	flex: 0 1 100%;
 }
 
-ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background-color: #333;
+.nav {
+	bottom: 0;
 }
 
-li {
-    float: left;
-    width: 100px;
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
 }
 
-li a {
-    display: block;
-    color: white;
-    text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
+main {
+	padding: 20px;
 }
 
-/* Change the link color to #111 (black) on hover */
-li a:hover {
-    background-color: #111;
+main>div {
+	width: 70vw;
 }

src/routes.js

@@ -1,31 +1,28 @@
 // src/routes.js
 import React from 'react';
-import {
-  BrowserRouter as Router,
-  Route,
-  Switch
-} from 'react-router-dom'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import App from './components/App';
 import Nav from './components/Nav';
 import Toggle from './components/Toggle';
 import Home from './components/Home';
-import Tabs from './components/Tabs';
+import TabView from './components/Tabs';
 import NotFound from './components/NotFound';
 
-const Routes = (props) => (
+const Routes = props =>
   <Router {...props}>
-  	<div>
-  	<App />
-    <Nav />
-  	<Switch>
-  	<Route path="/" exact component={Home} />
-    <Route path="/Toggle" component={Toggle} />
-    <Route path="/tabs" component={Tabs} />
-    <Route component={NotFound} />
-    </Switch>
+    <div className="container">
+      <App />
+      <Nav />
+      <main className="components">
+        <Switch>
+          <Route path="/" exact component={Home} />
+          <Route path="/Toggle" component={Toggle} />
+          <Route path="/tabs" component={TabView} />
+          <Route component={NotFound} />
+        </Switch>
+      </main>
     </div>
-  </Router>
-);
+  </Router>;
 
-export default Routes;
+export default Routes;