Popover

"use client"

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

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="secondary" />}>Dimensions</PopoverTrigger>
      <PopoverContent className="w-72">
        <PopoverHeader>
          <PopoverTitle>Image Size</PopoverTitle>
          <PopoverDescription>Set the width and height in pixels.</PopoverDescription>
        </PopoverHeader>
        <div className="mt-3 grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-2">
          <Label htmlFor="width" className="justify-end">Width:</Label>
          <Input id="width" defaultValue="1920" />
          <Label htmlFor="height" className="justify-end">Height:</Label>
          <Input id="height" defaultValue="1080" />
        </div>
      </PopoverContent>
    </Popover>
  )
}