@scrnhq/eurovision-elements/profile-picture/index.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  width: 3.75em;\n  height: 3.75em;\n  border-radius: 50%;\n  vertical-align: middle;\n'], ['\n  display: inline-block;\n  width: 3.75em;\n  height: 3.75em;\n  border-radius: 50%;\n  vertical-align: middle;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  font-family: ', '\n  text-transform: uppercase;\n  display: inline-block;\n  width: 3.75em;\n  height: 3.75em;\n  border-radius: 50%;\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  background: ', ';\n  color: ', ';\n'], ['\n  font-family: ', '\n  text-transform: uppercase;\n  display: inline-block;\n  width: 3.75em;\n  height: 3.75em;\n  border-radius: 50%;\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  background: ', ';\n  color: ', ';\n']);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Image = _styledComponents2.default.img(_templateObject);

var Initials = _styledComponents2.default.div(_templateObject2, function (props) {
  return props.theme.fontBase;
}, function (props) {
  return props.theme.primary;
}, function (props) {
  return props.theme.blank;
});

var ProfilePicture = function ProfilePicture(props) {
  if (props.image) {
    return _react2.default.createElement(Image, { alt: props.user, src: props.image });
  }

  return _react2.default.createElement(
    Initials,
    null,
    props.user.match(/\b(\w)/g).join('')
  );
};

ProfilePicture.propTypes = {
  image: _react.PropTypes.string,
  user: _react.PropTypes.string.isRequired
};

exports.default = ProfilePicture;