content: /*
  created by Ealon H.
  on 01/Feb/2017
  */
  import React from 'react'
  import { IndexLink, Link } from 'react-router'
  import './Header.scss'
  // import EalonImage from './assets/ealon_profile.jpg'
  import { Icon } from 'semantic-ui-react'
  import headerIcon from './assets/analytics.svg'
  import { Col, Row } from 'react-bootstrap'
  
  const EalonLabel = () => (
    <div style={{ paddingTop:'1em' }}>
      <Label as='a' color='yellow' image>
        <img src='http://tva4.sinaimg.cn/crop.0.1.640.640.180/006FOZu0jw8fbtlp1by3dj30hs0hvjs7.jpg' />
          Ealon Huang
          <Label.Detail>USYD</Label.Detail>
      </Label>
    </div>
  )
  
  export const Header = () => (
    <Row className='header'>
      <Col lg={4} sm={4} style={{textAlign:'right',paddingTop:'0.5rem'}}>
        <p>React-Redux App by Ealon</p>
      </Col>
      <Col lg={8} sm={8} className="menuButtons">
        <IndexLink to='/' activeClassName='route-active'>
          <button>Home</button>
        </IndexLink>
        <Link to='/counter' activeClassName='route-active'>
          <button>Counter</button>
        </Link>
        <Link to='/post' activeClassName='route-active'>
          <button>Post</button>
        </Link>
        <Link to='/loaders' activeClassName='route-active'>
          <button>Loaders</button>
        </Link>
        <a><Icon name='list' style={{fontSize:'1.2rem',color:'#fff'}}/></a>
      </Col>
      
  
      {/*<EalonLabel />*/}
    </Row>
  )
  
  export default Header
  