fix and update

apps/frontend/components/id/user-avatar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { VerificationBadge } from '@/components/id/verification-badge';
+import { useAvatarUrl } from '@/hooks/use-avatar-url';
+import { cn } from '@/lib/utils';
+
+export function UserAvatar({
+  userId,
+  displayName,
+  hasAvatar,
+  token,
+  isVerified,
+  verificationIcon,
+  className,
+  badgeSize = 'sm',
+  fallbackClassName
+}: {
+  userId: string;
+  displayName?: string;
+  hasAvatar?: boolean;
+  token: string | null;
+  isVerified?: boolean;
+  verificationIcon?: string | null;
+  className?: string;
+  badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
+  fallbackClassName?: string;
+}) {
+  const { avatarUrl } = useAvatarUrl(userId, hasAvatar, token);
+  const initials = (displayName ?? '')
+    .split(' ')
+    .map((part) => part[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase() || 'ID';
+
+  return (
+    <div className="relative inline-flex shrink-0">
+      <Avatar className={className}>
+        {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
+        <AvatarFallback className={cn('bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-xs font-semibold', fallbackClassName)}>
+          {initials.slice(0, 2)}
+        </AvatarFallback>
+      </Avatar>
+      {isVerified ? (
+        <VerificationBadge
+          verificationIcon={verificationIcon}
+          size={badgeSize}
+          className="absolute -top-0.5 -right-0.5 z-20"
+        />
+      ) : null}
+    </div>
+  );
+}