@braineet/ui
Version:
Braineet design system
71 lines • 2.34 kB
JavaScript
import styled from 'styled-components';
import { variant } from 'styled-system';
import { fluid, border } from '../../utils';
import Box from '../box';
import Icon from '../icon';
import Text from '../text';
var getSize = function getSize(props) {
var sizeItem = {
xxs: fluid(16),
xs: fluid(24),
sm: fluid(32),
md: fluid(40),
lg: fluid(80)
};
var size = sizeItem[props.sizeItem];
return {
width: size,
height: size,
minWidth: size
};
};
var getSizeAvatarBadge = function getSizeAvatarBadge() {
var size = fluid(14);
return {
width: size,
height: size,
minWidth: size
};
};
export var StyledAvatar = styled(Box).withConfig({
displayName: "styles__StyledAvatar",
componentId: "sc-1d8topx-0"
})(["position:relative;display:inline-block;background-color:white;box-shadow:", ";", " ", ""], function (props) {
return border(["0px 0px 0px 1px " + props.theme.utils.lighten('black', 0.1) + " inset"]);
}, getSize, variant({
prop: 'variant',
variants: {
circle: {
borderRadius: '50%'
},
square: {
borderRadius: '8px'
}
}
}));
export var StyledText = styled(Text).withConfig({
displayName: "styles__StyledText",
componentId: "sc-1d8topx-1"
})(["display:flex;align-items:center;justify-content:center;border-radius:inherit;", ""], getSize);
export var StyledImg = styled.img.withConfig({
displayName: "styles__StyledImg",
componentId: "sc-1d8topx-2"
})(["object-fit:cover;width:100%;height:100%;display:block;"]);
export var StyledAvatarBadge = styled(Box).withConfig({
displayName: "styles__StyledAvatarBadge",
componentId: "sc-1d8topx-3"
})(["position:absolute;border-radius:50%;bottom:0;right:0;", ""], getSizeAvatarBadge);
export var StyledCircle = styled(Box).withConfig({
displayName: "styles__StyledCircle",
componentId: "sc-1d8topx-4"
})(["display:flex;align-items:center;justify-content:center;background-color:", ";", " border-radius:50%;"], function (props) {
return props.backgroundColor;
}, getSizeAvatarBadge);
export var StyledIcon = styled(Icon).withConfig({
displayName: "styles__StyledIcon",
componentId: "sc-1d8topx-5"
})([""]);
export var ColorBadge = styled(Box).withConfig({
displayName: "styles__ColorBadge",
componentId: "sc-1d8topx-6"
})(["display:block;border-radius:50%;width:8px;height:8px;"]);