import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
import DemoWidget from './components/widget.jsx'

const App = React.createClass( {
    render() {
        let menu = (<ul>
            <li><Link to="/" activeClassName="active">Home</Link></li>
            <li><Link to="/widget" activeClassName="active">Widget Demo</Link></li>
        </ul>);

        return (<div>
            <div>{menu}</div>
            <div>{this.props.children}</div>
        </div>);
    }
} );

const Home = React.createClass( {
    render() {
        return (<div>Home!</div>);
    }
} );

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}/>
            <Route path="widget" component={DemoWidget}/>
        </Route>
    </Router>,
    document.getElementById( 'app' )
);