Popover

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/radix-sera/components/example"
5import { Button } from "@/registry/radix-sera/ui/button"
6import {
7  Dialog,
8  DialogContent,
9  DialogDescription,
10  DialogHeader,
11  DialogTitle,
12  DialogTrigger,
13} from "@/registry/radix-sera/ui/dialog"
14import { Field, FieldGroup, FieldLabel } from "@/registry/radix-sera/ui/field"
15import { Input } from "@/registry/radix-sera/ui/input"
16import {
17  Popover,
18  PopoverContent,
19  PopoverDescription,
20  PopoverHeader,
21  PopoverTitle,
22  PopoverTrigger,
23} from "@/registry/radix-sera/ui/popover"
24 
25export default function PopoverExample() {
26  return (
27    <ExampleWrapper>
28      <PopoverBasic />
29      <PopoverWithForm />
30      <PopoverAlignments />
31      <PopoverInDialog />
32    </ExampleWrapper>
33  )
34}
35 
36function PopoverBasic() {
37  return (
38    <Example title="Basic">
39      <Popover>
40        <PopoverTrigger asChild>
41          <Button variant="outline">Open Popover</Button>
42        </PopoverTrigger>
43        <PopoverContent align="start">
44          <PopoverHeader>
45            <PopoverTitle>Dimensions</PopoverTitle>
46            <PopoverDescription>
47              Set the dimensions for the layer.
48            </PopoverDescription>
49          </PopoverHeader>
50        </PopoverContent>
51      </Popover>
52    </Example>
53  )
54}
55 
56function PopoverWithForm() {
57  return (
58    <Example title="With Form">
59      <Popover>
60        <PopoverTrigger asChild>
61          <Button variant="outline">Open Popover</Button>
62        </PopoverTrigger>
63        <PopoverContent className="w-64" align="start">
64          <PopoverHeader>
65            <PopoverTitle>Dimensions</PopoverTitle>
66            <PopoverDescription>
67              Set the dimensions for the layer.
68            </PopoverDescription>
69          </PopoverHeader>
70          <FieldGroup className="gap-4">
71            <Field orientation="horizontal">
72              <FieldLabel htmlFor="width" className="w-1/2">
73                Width
74              </FieldLabel>
75              <Input id="width" defaultValue="100%" />
76            </Field>
77            <Field orientation="horizontal">
78              <FieldLabel htmlFor="height" className="w-1/2">
79                Height
80              </FieldLabel>
81              <Input id="height" defaultValue="25px" />
82            </Field>
83          </FieldGroup>
84        </PopoverContent>
85      </Popover>
86    </Example>
87  )
88}
89 
90function PopoverAlignments() {
91  return (
92    <Example title="Alignments">
93      <div className="flex gap-6">
94// … truncated