Popover

---
import { buttonVariants } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
---

<Popover>
  <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
    Open Popover
  </PopoverTrigger>
  <PopoverContent align="start">
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>
        Set the dimensions for the layer.
      </PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

---
import { buttonVariants } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
---

<div class="flex flex-wrap gap-3">
  <Popover>
    <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
      Start
    </PopoverTrigger>
    <PopoverContent align="start" class="w-56">
      Aligned to the start edge of the trigger.
    </PopoverContent>
  </Popover>

  <Popover>
    <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
      Center
    </PopoverTrigger>
    <PopoverContent align="center" class="w-56">
      Centered relative to the trigger.
    </PopoverContent>
  </Popover>

  <Popover>
    <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
      End
    </PopoverTrigger>
    <PopoverContent align="end" class="w-56">
      Aligned to the end edge of the trigger.
    </PopoverContent>
  </Popover>
</div>

---
import { Button, buttonVariants } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
---

<Popover>
  <PopoverTrigger class={buttonVariants({ variant: "outline" })}>
    Edit dimensions
  </PopoverTrigger>
  <PopoverContent class="w-80">
    <div class="grid gap-1.5">
      <h4 class="leading-none font-medium">Dimensions</h4>
      <p class="text-muted-foreground text-sm">
        Set the dimensions for the layer.
      </p>
    </div>
    <div class="grid gap-3">
      <div class="grid gap-2">
        <Label for="popover-width">Width</Label>
        <Input id="popover-width" defaultValue="100%" />
      </div>
      <div class="grid gap-2">
        <Label for="popover-max-width">Max width</Label>
        <Input id="popover-max-width" defaultValue="24rem" />
      </div>
    </div>
    <div class="flex justify-end">
      <Button size="sm">Save changes</Button>
    </div>
  </PopoverContent>
</Popover>