Popover

"use client";

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

export default function PopoverExample() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Set dimensions</Button>
      </PopoverTrigger>
      <PopoverContent align="center" className="w-72">
        <div className="space-y-4">
          <div>
            <h3 className="font-medium">Dimensions</h3>
            <p className="text-xs text-muted-foreground">
              Set a width for your panel.
            </p>
          </div>
          <div className="space-y-2">
            <Label htmlFor="popover-width">Width</Label>
            <Input id="popover-width" defaultValue="320px" />
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}