Hover card with positions.

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

const sides = ["top", "right", "bottom", "left"] as const
</script>

<template>
  <div class="grid grid-cols-2 gap-2">
    <HoverCard v-for="side in sides" :key="side" :open-delay="100" :close-delay="100">
      <HoverCardTrigger as-child>
        <Button variant="outline" class="flex-1 capitalize">{{ side.replace("-", " ") }}</Button>
      </HoverCardTrigger>

      <HoverCardContent :side="side">
        <div class="flex flex-col gap-1">
          <h4 class="font-medium">Hover Card</h4>
          <p class="text-muted-foreground">{{ `This hover card appears on the ${side.replace("-", " ")} side of the trigger.` }}</p>
        </div>
      </HoverCardContent>
    </HoverCard>
  </div>
</template>