Tooltip with online status indicator

<!--
  Расхождение с апстримом: сетевое изображение unsplash заменено локальным
  1x1 data-URI (`PIXEL`, та же константа что в блоках `avatar`/`ui-avatar`) —
  реальный сетевой запрос в headless-стенде недетерминирован.
-->
<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <div class="flex items-center justify-center">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger class="relative cursor-pointer">
          <Avatar>
            <AvatarImage :src="PIXEL" alt="James Davis" />
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
          <span class="border-background absolute right-0 bottom-0 block size-3 rounded-full border-2 bg-green-500" />
        </TooltipTrigger>
        <TooltipContent class="flex items-center gap-2 p-2">
          <Avatar>
            <AvatarImage :src="PIXEL" alt="James Davis" />
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
          <div class="flex flex-col gap-0.5">
            <span class="text-sm font-medium">James Davis</span>
            <div class="flex items-center gap-1.5 opacity-80">
              <span class="block size-1.5 shrink-0 rounded-full bg-green-500" />
              Online now
            </div>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</template>