content: import React, { Component } from 'react';
  
  export default class Tag extends Component {
    render() {
      return(
        <div style={tagStyle}>
          <div style={tagTextContainerStyle} onClick={() => this.props.onClickTag(this.props.text)}>
            <div style={tagTextStyle}>{this.props.text + ' (' + this.props.size + ')'}</div>
          </div>
          <div style={tagDeleteStyle}>
            <div className="fa fa-times" onClick={() => this.props.removeTag(this.props.text)} style={{ cursor: 'pointer' }}/>
          </div>
        </div>
      );
    }
  }
  
  const tagTextContainerStyle = {
    color: '#636262',
    flex: 2,
    cursor: 'default',
    display: 'flex',
    alignItems: 'flex-start',
    cursor: 'pointer'
  }
  
  const tagTextStyle = {
    cursor: 'pointer',
    fontSize: '12px'
  }
  
  const tagDeleteStyle = {
    color: '#636262',
    flex: 1,
    textAlign: 'right',
    marginLeft: '4px',
    fontSize: '12px'
  }
  
  const tagStyle = {
    flex: '1',
    height: '20px',
    minWidth: '120px',
    borderStyle: 'solid',
    borderWidth: '1px',
    borderRadius: '5px',
    borderColor: '#cbcbcb',
    padding: '0 8px 0 8px',
    margin: '0 8px 16px 8px',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: '1px 1px 5px #949494'
  }
  