Popovers opening from different sides.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

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

<template>
  <div class="grid grid-cols-2 gap-2">
    <Popover v-for="side in sides" :key="side">
      <PopoverTrigger as-child>
        <Button variant="outline" class="w-full capitalize">{{ side.replace("-", " ") }}</Button>
      </PopoverTrigger>
      <PopoverContent :side="side" class="w-40">
        <p>{{ `Popover on ${side.replace("-", " ")}` }}</p>
      </PopoverContent>
    </Popover>
  </div>
</template>