test commit

client/src/shared/ui/UserAvatar.tsx

@@ -0,0 +1,30 @@
+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
+  avatarType?: string | null
+  avatarStyle?: string | null
+  size?: number
+  sx?: SxProps<Theme>
+}
+
+export function UserAvatar({ userId, avatarUrl, avatarType, 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 = avatarType && avatarUrl ? avatarUrl : generatedSrc
+
+  return (
+    <Avatar src={src} sx={{ width: size, height: size, bgcolor: 'primary.main', ...sx }}>
+      ?
+    </Avatar>
+  )
+}