jobiqo-cl/lib/src/components/02-atoms/12-user/01-avatar/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);

/**
 * @file index.tsx
 *
 * @fileoverview User Avatar component.
 */
const StyledAvatarWrapper = styled__default.div `
  position: relative;
  display: inline-block;
  &:after {
    content: '';
    display: ${props => (props.status ? 'block' : 'none')};
    position: absolute;
    border-radius: 8px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    border-radius: 100%;
    top: ${props => (props.size === 'medium' ? '0' : '-0.25rem')};
    right: ${props => (props.size === 'medium' ? '0.25rem' : '-0.25rem')};
    width: ${props => (props.size === 'medium' ? '1rem' : '0.5rem')};
    height: ${props => (props.size === 'medium' ? '1rem' : '0.5rem')};
    background: ${props => {
    if (props.status === 'active') {
        return props.theme.colors.success;
    }
    if (props.status === 'hidden') {
        return props.theme.colors.warning;
    }
    return props.theme.colors.danger;
}};
  }
`;
const StyledUserAvatar = styled__default.img `
  width: ${props => (props.size === 'medium' ? '80px' : '30px')};
  border-radius: 100%;
`;
/**
 * Display a user avatar image.
 */
const Avatar = (_a) => {
    var { status = null, size = 'medium', title, src = `https://ui-avatars.com/api/?name=${title}&background=2f3541&color=fff&size=128&font-size=0.25` } = _a, props = tslib_es6.__rest(_a, ["status", "size", "title", "src"]);
    return (React__default.createElement(StyledAvatarWrapper, { status: status, size: size },
        React__default.createElement(StyledUserAvatar, Object.assign({ size: size, src: src }, props))));
};

exports.Avatar = Avatar;
exports.default = Avatar;