Hover card with profile information.

<!--
  Порт c-hover-card-3 ("Profile hover card") —
  .agent-tmp/reui-upstream/registry-reui/bases/radix/components/hover-card/c-hover-card-3.tsx

  Отличия от апстрима (docs/PORTING.md §5, §10):
  - `IconPlaceholder` (иконка календаря внутри `HoverCardContent`) заменена
    инлайновым `<svg>` (lucide-react v0.545.0 "calendar") — контент не
    смонтирован в закрытом состоянии, диф это не проверяет, но пишем
    настоящий SVG, а не оставляем блокер.
  - Сетевой unsplash-аватар в триггере (всегда смонтирован) заменён
    локальным 1×1 `data:` URI (`PIXEL`, та же константа, что в
    `badge`/`avatar`/`block-tooltip`).
-->
<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"

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

<template>
  <div class="flex min-h-[100px] items-center justify-center">
    <HoverCard :open-delay="100" :close-delay="100">
      <HoverCardTrigger as-child>
        <div class="flex cursor-pointer items-center gap-2">
          <Avatar class="size-8">
            <AvatarImage :src="PIXEL" alt="Elena Soroka" />
            <AvatarFallback>ES</AvatarFallback>
          </Avatar>
          <div>
            <p class="text-sm font-medium hover:underline">Elena Soroka</p>
            <p class="text-muted-foreground text-xs">@e.soroka</p>
          </div>
        </div>
      </HoverCardTrigger>
      <HoverCardContent class="w-64">
        <div class="flex space-x-2">
          <Avatar class="size-10 shrink-0">
            <AvatarImage :src="PIXEL" alt="Elena Soroka" />
            <AvatarFallback>ES</AvatarFallback>
          </Avatar>
          <div class="space-y-1">
            <div>
              <p class="text-sm font-medium hover:underline">Elena Soroka</p>
              <p class="text-muted-foreground text-xs">@e.soroka</p>
            </div>
            <p class="text-foreground">Lead Product Designer at Vibe.</p>
            <div class="flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="size-3.5 opacity-60"
              >
                <path d="M8 2v4" />
                <path d="M16 2v4" />
                <rect width="18" height="18" x="3" y="4" rx="2" />
                <path d="M3 10h18" />
              </svg>
              <span class="text-muted-foreground text-xs leading-none">Joined December 2023</span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  </div>
</template>