Basic hover card.

<!--
  Порт c-hover-card-1 ("Basic hover card") —
  .agent-tmp/reui-upstream/registry-reui/bases/radix/components/hover-card/c-hover-card-1.tsx
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
</script>

<template>
  <div class="flex min-h-[100px] items-center justify-center">
    <HoverCard :open-delay="100" :close-delay="100">
      <HoverCardTrigger as-child>
        <Button variant="outline">Hover Me</Button>
      </HoverCardTrigger>
      <HoverCardContent>
        <div class="flex flex-col gap-1">
          <h4 class="leading-none font-medium">Hover Card</h4>
          <p class="text-muted-foreground">
            A basic hover card that appears when you hover over the trigger.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  </div>
</template>