take 5

import React from 'react';
import styles from './Cover.css';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
import Avatar from './Avatar';

import { Button } from 'react-bootstrap';

@withStyles(styles)
class Cover extends React.Component {
  getInitialState() {
    return {
      isFollowing: false
    }
  },
  toggleFollow () {
    this.setState({isFollowing: !this.state.isFollowing});
    // do other stuff
  },

  render() {

    return (
      var followClass = this.state.isFollowing? 'active': '';
      <div className="Cover">
        <div className="Cover-container">
          <div>
            <Avatar 
              username="hilarl" 
              profession="Web Developer" 
              location="New York, New York"
              status="I am here to protect my business, a bunch of kids are out to ruin me" />
              <div className="Cover-submenu-container">
                <div className="Cover-submenu-section">
                  .
                </div>
                <div className="Cover-submenu-section links">
                  <a href="#" className="Cover-submenu-link">
                    <i className="fa fa-twitter"></i>
                  </a>
                  <a href="#" className="Cover-submenu-link">
                    <i className="fa fa-facebook"></i>
                  </a>
                </div>

                <div className="Cover-submenu-section connect-menu">
                  <Button className={`follow-btn ${followClass}`} href="#" onClick={this.toggleFollow.bind(this)}>Follow</Button>
                </div>
              </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Cover;