{"size": 1014, "ext": "js", "max_stars_repo_path": "src/components/Avatar/index.js", "max_stars_repo_name": "rafaelklaessen/vx-components-react", "max_stars_repo_stars_event_min_datetime": "2018-08-22T11:13:59.000Z", "max_stars_repo_stars_event_max_datetime": "2018-09-20T19:56:02.000Z", "max_issues_repo_path": "src/components/Avatar/index.js", "max_issues_repo_name": "rafaelklaessen/vx-components-react", "max_issues_repo_issues_event_min_datetime": "2018-07-29T12:34:27.000Z", "max_issues_repo_issues_event_max_datetime": "2018-08-22T18:10:37.000Z", "max_forks_repo_path": "src/components/Avatar/index.js", "max_forks_repo_name": "rafaelklaessen/vx-components-react", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 11, "max_forks_count": null, "avg_line_length": 24.7317073171, "max_line_length": 66, "alphanum_fraction": 0.6982248521}
import PropTypes from 'prop-types';
import styled from 'react-emotion';
import { darkGrey, white } from '../../colors';
import withTheme from '../ThemeContext/withTheme';

const Avatar = styled('figure')({
  margin: 0,
  fontWeight: 300,
  borderRadius: '100%',
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center'
}, ({ src, color, contentColor, size, theme }) => ({
  fontFamily: theme.fontFamily,
  fontSize: theme.fontSize * 1.2,
  color: contentColor,
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundColor: color,
  backgroundImage: src ? `url('${src}')` : null,
  backgroundRepeat: 'no-repeat',
  width: size,
  height: size
}));

Avatar.propTypes = {
  src: PropTypes.string,
  color: PropTypes.string,
  contentColor: PropTypes.string,
  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  theme: PropTypes.object.isRequired
};

Avatar.defaultProps = {
  color: darkGrey,
  contentColor: white,
  size: 48
};

export default withTheme(Avatar);
