Function UserAvatar

web/components/collaboration/PresenceAvatars.tsx:21–70

({ name, color, avatar, role, isActive = true }: AvatarProps)

}

function UserAvatar({ name, color, avatar, role, isActive = true }: AvatarProps) {
  return (
    <Tooltip.Provider delayDuration={300}>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <div
            className="relative w-7 h-7 rounded-full flex-shrink-0 cursor-default select-none"
            style={{ boxShadow: `0 0 0 2px ${color}` }}
          >
            {avatar ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img
                src={avatar}
                alt={name}
                className="w-full h-full rounded-full object-cover"
              />
            ) : (
              <div
                className="w-full h-full rounded-full flex items-center justify-center text-[10px] font-semibold text-white"
                style={{ backgroundColor: color }}
              >
                {getInitials(name)}
              </div>
            )}

            {/* Online indicator dot */}
            {isActive && (
              <span className="absolute bottom-0 right-0 w-2 h-2 rounded-full bg-green-400 border border-surface-900" />
            )}
          </div>
        </Tooltip.Trigger>

        <Tooltip.Portal>
          <Tooltip.Content
            side="bottom"
            sideOffset={6}
            className={cn(
              "z-50 rounded-md px-2.5 py-1.5 text-xs shadow-md",
              "bg-surface-800 border border-surface-700 text-surface-100"
            )}
          >
            <p className="font-medium">{name}</p>
            <p className="text-surface-400">{labelForRole(role)}</p>
            <Tooltip.Arrow className="fill-surface-800" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}

// ─── PresenceAvatars ──────────────────────────────────────────────────────────