"use client"

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

export default function PopoverBasicDemo() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>
        Station settings
      </PopoverTrigger>
      <PopoverContent>
        <div className="flex flex-col gap-1">
          <PopoverTitle>Station settings</PopoverTitle>
          <PopoverDescription>
            Tune how this station announces itself on the mesh.
          </PopoverDescription>
        </div>
        <div className="flex flex-col gap-2">
          <Label htmlFor="popover-callsign">Callsign</Label>
          <Input
            id="popover-callsign"
            defaultValue="KX-42"
            className="font-mono"
          />
        </div>
        <div className="flex flex-col gap-2">
          <Label htmlFor="popover-frequency">Frequency</Label>
          <Input
            id="popover-frequency"
            defaultValue="146.520 MHz"
            className="font-mono"
          />
        </div>
      </PopoverContent>
    </Popover>
  )
}
Draw

Examples
