Kirill
30 lines
895 B
TypeScript
30 lines
895 B
TypeScript
import { useMemo } from 'react'
|
|
import Avatar from '@mui/material/Avatar'
|
|
import type { SxProps, Theme } from '@mui/material/styles'
|
|
import { createAvatar } from '@dicebear/core'
|
|
import { DEFAULT_STYLE_ID, getStyleById } from '@/shared/lib/avatar-styles'
|
|
|
|
type UserAvatarProps = {
|
|
userId: string
|
|
avatarUrl?: string | null
|
|
avatarStyle?: string | null
|
|
size?: number
|
|
sx?: SxProps<Theme>
|
|
}
|
|
|
|
export function UserAvatar({ userId, avatarUrl, avatarStyle, size = 40, sx }: UserAvatarProps) {
|
|
const generatedSrc = useMemo(() => {
|
|
const styleDef = getStyleById(avatarStyle || DEFAULT_STYLE_ID)
|
|
const avatar = createAvatar(styleDef.style, { seed: userId })
|
|
return avatar.toDataUri()
|
|
}, [userId, avatarStyle])
|
|
|
|
const src = avatarUrl || generatedSrc
|
|
|
|
return (
|
|
<Avatar src={src} sx={{ width: size, height: size, bgcolor: 'primary.main', ...sx }}>
|
|
?
|
|
</Avatar>
|
|
)
|
|
}
|