header.jsx

import React from 'react';
import Paper from 'material-ui/lib/paper';
import Toolbar from 'material-ui/lib/toolbar/toolbar';
import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group';
import ToolbarSeparator from 'material-ui/lib/toolbar/toolbar-separator';
import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title';
import FlatButton from 'material-ui/lib/flat-button';

let style = {
  paper: {
    backgroundColor: "#333333",
    padding: 5,
    textAlign: "center"
  },
  toolbar: {
    backgroundColor: "#666666"
  },
  button: {
    paddingLeft: "5px",
    paddingRight: "5px",
    margin: 0
  }
};

export default React.createClass({
  
  render() {
    
    return (
      <div>
        <Paper 
          style={style.paper}
          rounded={false}
          zDepth={0}
        >
          <img src="/images/artemisquesmall.png" />
        </Paper>
        <Toolbar style={style.toolbar}>
          <ToolbarGroup float="left">
            <FlatButton label="Primary" primary={true} style={style.button} />
            <FlatButton label="Primary" primary={true} style={style.button} />
            <FlatButton label="Primary" primary={true} style={style.button} />
            <FlatButton label="Primary" primary={true} style={style.button} />
            <FlatButton label="Primary" primary={true} style={style.button} />
          </ToolbarGroup>
          <ToolbarGroup float="right" lastChild={true}>
            <ToolbarTitle text="Right" />
          </ToolbarGroup>
        </Toolbar>
      </div>
    );
    
  }
  
})