add a prototype navbar component

package.json

@@ -23,6 +23,8 @@
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.2.3",
     "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "style-loader": "^0.23.1",
     "webpack": "^4.28.4",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14"

readme.md

@@ -15,4 +15,6 @@ TBD
 
 ## To-Do
 
+* database & expressjs
+* Look into styled-components (or other methods of adding css to react?)
 * Add support for Ethereum addresses.

src/components/navbar.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+
+export default class NavBar extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  renderButton(button) {
+    return (button) => {
+      if (button === this.props.active) {
+        return <a href={button.link} className="active" key={button.text}>{button.text}</a>
+      } else {
+        return <a href={button.link} key={button.text}>{button.text}</a>
+      }
+    }
+  }
+
+  renderName() {
+    return <a className="brand" href="#">{this.props.name}</a>
+  }
+
+
+
+  render() {
+    return (
+      <nav className="nav">
+        <div className="nav-left">
+          {this.renderName()}
+          <div className="tabs">
+            {this.props.buttons.map(this.renderButton())}
+          </div>
+        </div>
+        <div className="nav-right">
+          <a className="button outline">Button</a>
+        </div>
+      </nav>
+    );
+  }
+}

src/index.js

@@ -1,14 +1,31 @@
 require("@babel/polyfill");
 
-import React, { Component }  from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import NavBar from './components/navbar';
+import './static/chota.css';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+  }
 
-class HelloWorld extends Component {
   render() {
-    return <div>Hello World!</div>
+    let navButtons = [{
+      text: 'Page 1',
+      link: 'Link 1'
+    }, {
+      text: 'Page 2',
+      link: 'Link 2'
+    }];
+
+    return (
+      <>
+        <NavBar buttons={navButtons} active={navButtons[0]} name='Wallet Validator' />
+        <div>Hello World!</div>
+      </>
+    )
   }
 }
 
-const App = () => <HelloWorld/>
-
-ReactDOM.render(<App/>, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));