47 lines
990 B
TypeScript
47 lines
990 B
TypeScript
import { styled } from './../tokens/stitches.config'
|
|
import { Root, Fallback } from '@radix-ui/react-avatar'
|
|
|
|
type AvatarProps = {
|
|
imageURL?: string
|
|
height: string
|
|
fallbackText: string
|
|
tooltip?: string
|
|
}
|
|
|
|
export function Avatar(props: AvatarProps): JSX.Element {
|
|
return (
|
|
<StyledAvatar
|
|
title={props.tooltip}
|
|
css={{
|
|
width: props.height,
|
|
height: props.height,
|
|
borderRadius: '50%',
|
|
}}
|
|
>
|
|
<StyledFallback>{props.fallbackText}</StyledFallback>
|
|
</StyledAvatar>
|
|
)
|
|
}
|
|
|
|
const StyledAvatar = styled(Root, {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
verticalAlign: 'middle',
|
|
overflow: 'hidden',
|
|
userSelect: 'none',
|
|
})
|
|
|
|
const StyledFallback = styled(Fallback, {
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '15px',
|
|
fontWeight: 600,
|
|
fontFamily: '$inter',
|
|
color: '$avatarFont',
|
|
backgroundColor: '$avatarBg',
|
|
})
|