7561e996c6
Feat(LOY-311) Create avatar design system component * feat(LOY-311): Creat & use New Avatar Design System Component * refactor(LOY-311): replace avatar used in app header with design system component * fix(LOY-311): use correct space vars Approved-by: Erik Tiekstra
36 lines
936 B
TypeScript
36 lines
936 B
TypeScript
import { MaterialIcon } from '../Icons/MaterialIcon'
|
|
import { Typography } from '../Typography'
|
|
import Image from '../Image'
|
|
|
|
import { variants } from './variants'
|
|
import type { AvatarProps } from './types'
|
|
|
|
export function Avatar({
|
|
src,
|
|
alt,
|
|
initials,
|
|
size = 'md',
|
|
className,
|
|
}: AvatarProps) {
|
|
const classNames = variants({ size, className })
|
|
const pixelSize = size === 'sm' ? 24 : size === 'md' ? 32 : 55
|
|
const iconSize = size === 'sm' ? 16 : 24
|
|
|
|
return (
|
|
<div className={classNames}>
|
|
{src ? (
|
|
<Image src={src} alt={alt || ''} width={pixelSize} height={pixelSize} />
|
|
) : initials ? (
|
|
<Typography
|
|
variant={size === 'lg' ? 'Title/Overline/sm' : 'Tag/sm'}
|
|
className={variants.initials}
|
|
>
|
|
<span>{initials}</span>
|
|
</Typography>
|
|
) : (
|
|
<MaterialIcon icon="person" color="Icon/Inverted" size={iconSize} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|