Popover

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/base-vega/components/example"
5import { Button } from "@/registry/base-vega/ui/button"
6import {
7  Dialog,
8  DialogContent,
9  DialogDescription,
10  DialogHeader,
11  DialogTitle,
12  DialogTrigger,
13} from "@/registry/base-vega/ui/dialog"
14import { Field, FieldGroup, FieldLabel } from "@/registry/base-vega/ui/field"
15import { Input } from "@/registry/base-vega/ui/input"
16import {
17  Popover,
18  PopoverContent,
19  PopoverDescription,
20  PopoverHeader,
21  PopoverTitle,
22  PopoverTrigger,
23} from "@/registry/base-vega/ui/popover"
24 
25export default function PopoverExample() {
26  return (
27    <ExampleWrapper>
28      <PopoverBasic />
29      <PopoverSides />
30      <PopoverWithForm />
31      <PopoverAlignments />
32      <PopoverInDialog />
33    </ExampleWrapper>
34  )
35}
36 
37function PopoverBasic() {
38  return (
39    <Example title="Basic">
40      <Popover>
41        <PopoverTrigger render={<Button variant="outline" className="w-fit" />}>
42          Open Popover
43        </PopoverTrigger>
44        <PopoverContent align="start">
45          <PopoverHeader>
46            <PopoverTitle>Dimensions</PopoverTitle>
47            <PopoverDescription>
48              Set the dimensions for the layer.
49            </PopoverDescription>
50          </PopoverHeader>
51        </PopoverContent>
52      </Popover>
53    </Example>
54  )
55}
56 
57function PopoverSides() {
58  return (
59    <Example title="Sides">
60      <div className="flex flex-col gap-2">
61        <div className="flex flex-wrap gap-2">
62          {(["inline-start", "left", "top"] as const).map((side) => (
63            <Popover key={side}>
64              <PopoverTrigger
65                render={
66                  <Button variant="outline" className="w-fit capitalize" />
67                }
68              >
69                {side.replace("-", " ")}
70              </PopoverTrigger>
71              <PopoverContent side={side} className="w-40">
72                <p>Popover on {side.replace("-", " ")}</p>
73              </PopoverContent>
74            </Popover>
75          ))}
76        </div>
77        <div className="flex flex-wrap gap-2">
78          {(["bottom", "right", "inline-end"] as const).map((side) => (
79            <Popover key={side}>
80              <PopoverTrigger
81                render={
82                  <Button variant="outline" className="w-fit capitalize" />
83                }
84              >
85                {side.replace("-", " ")}
86              </PopoverTrigger>
87              <PopoverContent side={side} className="w-40">
88// … truncated