<main></main>

html, body { margin:0; padding: 0}

.top-bar {
  background: black;
  color: white;
  padding: 10px;
  margin-bottom:10px;
}

nav a {
  padding: 10px;  
}

nav a.active {
  color: yellow;
  background:blue;
}

.content {
  padding:10px;
}


.users-page {
  text-align:center;
  font-size: 48px;
  transform:rotate(20deg) translate(0px,100px);
  background:orange;
  width: 50%;
  padding-top: 80px;
  padding-bottom: 80px;
  
}

var { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } = ReactRouter;

var App = React.createClass({
  
  render: function() {
    var names = ['jane', 'bob', 'martha'];
    return <div className="">
      <div className="top-bar">Yo Router</div>
      <nav>
        <IndexLink to="/" activeClassName="active">Main</IndexLink>
        <Link to="about" activeClassName="active">About</Link>
        <Link to="users" activeClassName="active">Users</Link>
      </nav>
      <div className="content">{this.props.children}</div>    
    </div>
  }
})

var About = React.createClass({
  render: function() {
    debugger;
    return <div>
      Yo Im the about page <p> 
      {this.props.route.foo}
      </p>
        </div>;
  }
});

var Hello = React.createClass({
  render: function() {
    var name = this.props.params.name;
    return <p>Hello! {name}</p>
  }
});

var Users = React.createClass({
  render: function() {
    return <div className="users-page">Yo Im the users page</div>;
  }
});

var Index = React.createClass({
  render: function() {
    return <p>List of all items...</p>
  }
});

var Routes = React.createClass({
  render: function() {
    return (<Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index} />
      <Route path="about" component={About} foo="x" />
      <Route path="users" component={About} foo="y" />
      <Route path="hello/:name" component={Hello} />
    </Route>
  </Router>)
  }
});

ReactDOM.render(<Routes />, document.querySelector('main'));