Popover with media preview.

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "external-link") — см. docs/PORTING.md §5.
  Сетевое изображение picsum.photos заменено локальным 1x1 data-URI
  (`PIXEL`, та же константа что в блоках `avatar`) — реальный сетевой
  запрос в headless-стенде недетерминирован. Оба расхождения находятся
  внутри `PopoverContent`, который в закрытом состоянии не рендерится
  (диф проверяет только закрытый триггер, см. react.tsx).
-->
<script setup lang="ts">
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" size="sm">Preview Media</Button>
      </PopoverTrigger>
      <PopoverContent class="w-[320px] gap-0 overflow-hidden p-0" align="end">
        <div class="bg-muted aspect-video w-full overflow-hidden">
          <img
            :src="PIXEL"
            alt="Website Template Preview"
            width="320"
            height="180"
            class="h-full w-full object-cover transition-transform duration-500 hover:scale-105"
          />
        </div>
        <div class="space-y-3 p-2">
          <div class="space-y-1 pt-1">
            <h4 class="text-sm leading-none font-semibold">Portfolio Pro</h4>
            <p class="text-muted-foreground text-xs">Premium photography template with dark mode.</p>
          </div>
          <div class="grid grid-cols-2 items-center gap-2">
            <Button size="sm" class="flex-1">Install Template</Button>
            <Button size="sm" variant="outline" aria-label="View demo in new tab">
              Learn more
              <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="lucide lucide-external-link"
              >
                <path d="M15 3h6v6" />
                <path d="M10 14 21 3" />
                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
              </svg>
            </Button>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  </div>
</template>