Popover within a dialog.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover"
</script>

<template>
  <div class="flex items-center justify-center">
    <Dialog>
      <DialogTrigger as-child>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent class="p-4">
        <DialogHeader>
          <DialogTitle>Popover Example</DialogTitle>
          <DialogDescription>Click the button below to see the popover.</DialogDescription>
        </DialogHeader>
        <Popover>
          <PopoverTrigger as-child>
            <Button variant="outline" class="w-fit">Open Popover</Button>
          </PopoverTrigger>
          <PopoverContent align="start" class="w-auto">
            <PopoverHeader>
              <PopoverTitle>Popover in Dialog</PopoverTitle>
              <PopoverDescription>
                This popover appears inside a dialog. Click the button to open it.
              </PopoverDescription>
            </PopoverHeader>
          </PopoverContent>
        </Popover>
      </DialogContent>
    </Dialog>
  </div>
</template>