"use client";

import {
  Button,
  Input,
  Label,
  Popover,
  PopoverDescription,
  PopoverPopup,
  PopoverTitle,
  PopoverTrigger,
} from "@countryclub/ui-react";

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>
        Dimensions
      </PopoverTrigger>
      <PopoverPopup className="w-72">
        <div className="grid gap-4">
          <div className="grid gap-1.5">
            <PopoverTitle>Dimensions</PopoverTitle>
            <PopoverDescription>
              Set the size for the event banner.
            </PopoverDescription>
          </div>
          <div className="grid gap-3">
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="popover-width">Width</Label>
              <Input
                className="col-span-2"
                defaultValue="100%"
                id="popover-width"
                size="sm"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="popover-height">Height</Label>
              <Input
                className="col-span-2"
                defaultValue="320px"
                id="popover-height"
                size="sm"
              />
            </div>
          </div>
        </div>
      </PopoverPopup>
    </Popover>
  );
}
Popover

Import

Default
