import * as React from 'react';
import Actions from '../actions/book-actions';
import { Link } from 'react-router';

export default React.createClass({

  _search(event) {
    Actions.search(event.target.value.toLowerCase());
  },

  render() {
    return (
      <nav className="navbar navbar-default">
        <div className="container-fluid">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span className="sr-only">Toggle navigation</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
            <a className="navbar-brand" href="#">Webpack Lab</a>
          </div>
          <div id="navbar" className="navbar-collapse collapse">
            <ul className="nav navbar-nav">
              <li className="active"><Link to="home">Home</Link></li>
              <li><a href="#">About</a></li>
            </ul>
            <ul className="nav navbar-nav navbar-right">
              <form className="navbar-form navbar-left" role="search">
                <div className="form-group">
                  <input type="text" className="form-control" placeholder="Search" onChange={this._search} />
                </div>
              </form>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
    );
  }

});

import * as React from 'react';
import Actions from '../actions/book-actions';
import { Link } from 'react-router';
import Login from '../components/login.react';
import Style from '../utils/styles';

export default React.createClass({

  _search(event) {
    Actions.search(event.target.value.toLowerCase());
  },

  render() {
    return (
      <nav className="navbar navbar-default">
        <div className="container-fluid">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span className="sr-only">Toggle navigation</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
            <a className="navbar-brand" href="#">Webpack Lab</a>
          </div>
          <div id="navbar" className="navbar-collapse collapse">

            <ul className="nav navbar-nav">
              <form className="navbar-form navbar-left" role="search">
                <div className="form-group">
                  <input type="text" className="form-control" style={Style.app.search} placeholder="Search" onChange={this._search} />
                </div>
              </form>
            </ul>

            <Login />

          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
    );
  }

});

add login component