@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
40 lines (37 loc) • 1.22 kB
JavaScript
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { bordersTemplate } from '@equinor/eds-utils';
import { avatar } from './Avatar.tokens.js';
import { jsx } from 'react/jsx-runtime';
const StyledAvatar = styled.div.withConfig({
displayName: "Avatar__StyledAvatar",
componentId: "sc-r7n7on-0"
})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), ({
$size
}) => css(["height:", "px;width:", "px;"], $size, $size));
const StyledImage = styled.img.withConfig({
displayName: "Avatar__StyledImage",
componentId: "sc-r7n7on-1"
})(["height:100%;text-align:center;color:transparent;", ";"], ({
$disabled
}) => $disabled && css(["opacity:", ";"], avatar.states.disabled.opacity));
const Avatar = /*#__PURE__*/forwardRef(function Avatar({
src = null,
alt,
size = 24,
disabled = false,
...rest
}, ref) {
return /*#__PURE__*/jsx(StyledAvatar, {
$size: size,
ref: ref,
...rest,
children: /*#__PURE__*/jsx(StyledImage, {
src: src,
alt: alt,
$disabled: disabled
})
});
});
Avatar.displayName = 'Avatar';
export { Avatar };