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

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

import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
import React__default from 'react';
import styled from 'styled-components';

/**
 * @file index.tsx
 *
 * @fileoverview User Avatar component.
 */
const StyledAvatarWrapper = styled.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.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 = __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))));
};

export default Avatar;
export { Avatar };