Tooltip with avatar and role badge

<!--
  Расхождение с апстримом: сетевое изображение unsplash заменено локальным
  1x1 data-URI (`PIXEL`, та же константа что в блоках `avatar`/`ui-avatar`) —
  реальный сетевой запрос в headless-стенде недетерминирован.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
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 p-3">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Avatar>
            <AvatarImage :src="PIXEL" alt="Emma Wilson" />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
        </TooltipTrigger>
        <TooltipContent class="flex items-center gap-2 p-2">
          <Avatar>
            <AvatarImage :src="PIXEL" alt="Emma Wilson" />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
          <div class="flex flex-col gap-0.5">
            <div class="flex items-center gap-1">
              <span class="font-semibold">Emma Wilson</span>
              <Badge variant="info" size="xs">Admin</Badge>
            </div>
            <p class="opacity-80">emma@example.com</p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</template>