55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
'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>
|
|
);
|
|
}
|