Popover with user profile details.

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

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

<template>
  <div class="flex min-h-[100px] items-center justify-center">
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" class="h-auto justify-start py-1.5">
          <Avatar class="size-8">
            <AvatarImage :src="PIXEL" alt="Marcus Chen" />
            <AvatarFallback>MC</AvatarFallback>
          </Avatar>
          <div class="space-y-0.5 text-left">
            <p class="leading-none font-medium">Marcus Chen</p>
            <p class="text-muted-foreground">@mchen_design</p>
          </div>
        </Button>
      </PopoverTrigger>
      <PopoverContent class="w-64">
        <div class="flex flex-col gap-2.5">
          <div class="flex items-start justify-between">
            <Avatar class="size-12">
              <AvatarImage :src="PIXEL" alt="Marcus Chen" />
              <AvatarFallback>MC</AvatarFallback>
            </Avatar>
            <Button size="sm" variant="outline">Follow</Button>
          </div>
          <div class="space-y-1">
            <h4 class="leading-none font-semibold">Marcus Chen</h4>
            <p class="text-muted-foreground">@mchen_design</p>
          </div>
          <p class="leading-relaxed">Product Designer specializing in design systems.</p>
          <div class="flex items-center gap-4">
            <div class="flex items-center gap-1">
              <span class="font-semibold tabular-nums">1.2k</span>
              <span class="text-muted-foreground">Followers</span>
            </div>
            <div class="flex items-center gap-1">
              <span class="font-semibold tabular-nums">482</span>
              <span class="text-muted-foreground">Following</span>
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  </div>
</template>