content: import React from 'react';
  import classNames from 'classnames';
  
  class AvatarItem extends React.Component {
    static propTypes = {
      className: React.PropTypes.string,
      image: React.PropTypes.string,
      placeholder: React.PropTypes.string.isRequired,
      size: React.PropTypes.string,
      title: React.PropTypes.string.isRequired
    };
  
    constructor(props) {
      super(props);
    }
  
    render() {
      const title = this.props.title;
      const image = this.props.image;
      const size = this.props.size;
  
      let placeholder,
          avatar;
      let placeholderClassName = classNames('avatar__placeholder', `avatar__placeholder--${this.props.placeholder}`);
      let avatarClassName = classNames('avatar', {
        'avatar--tiny': size === 'tiny',
        'avatar--small': size === 'small',
        'avatar--medium': size === 'medium',
        'avatar--big': size === 'big',
        'avatar--huge': size === 'huge',
        'avatar--square': size === 'square'
      }, this.props.className);
  
      placeholder = <span className={placeholderClassName}>{title[0]}</span>;
  
      if (image) {
        avatar = <img alt={title} className="avatar__image" src={image}/>;
      }
  
      return (
        <div className={avatarClassName}>
          {avatar}
          {placeholder}
        </div>
      );
    }
  }
  
  export default AvatarItem;
  