56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { UserAvatar } from '@/components/id/user-avatar';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function OnlineDot({ online, className }: { online?: boolean; className?: string }) {
|
|
if (!online) return null;
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'absolute bottom-0 right-0 z-10 h-3 w-3 rounded-full border-2 border-white bg-emerald-500 shadow-sm',
|
|
className
|
|
)}
|
|
aria-hidden
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function AvatarWithPresence({
|
|
userId,
|
|
displayName,
|
|
hasAvatar,
|
|
token,
|
|
isVerified,
|
|
verificationIcon,
|
|
online,
|
|
className = 'h-9 w-9',
|
|
badgeSize = 'xs'
|
|
}: {
|
|
userId: string;
|
|
displayName?: string;
|
|
hasAvatar?: boolean;
|
|
token: string | null;
|
|
isVerified?: boolean;
|
|
verificationIcon?: string | null;
|
|
online?: boolean;
|
|
className?: string;
|
|
badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
|
|
}) {
|
|
return (
|
|
<div className="relative inline-flex shrink-0">
|
|
<UserAvatar
|
|
userId={userId}
|
|
displayName={displayName}
|
|
hasAvatar={hasAvatar}
|
|
token={token}
|
|
isVerified={isVerified}
|
|
verificationIcon={verificationIcon}
|
|
className={className}
|
|
badgeSize={badgeSize}
|
|
/>
|
|
<OnlineDot online={online} />
|
|
</div>
|
|
);
|
|
}
|