Popover

1import { Popover, PopoverContent, PopoverTrigger } from "passport-ui";
2import { Button } from "passport-ui";
3import { Input } from "passport-ui";
4import { Label } from "passport-ui";

1<Popover>
2  <PopoverTrigger asChild>
3    <Button variant="outline">Open popover</Button>
4  </PopoverTrigger>
5  <PopoverContent className="w-sm">
6    <div className="section-container">
7      <div className="meta-container">
8        <h3>Dimensions</h3>
9        <p>Set the dimensions for the layer.</p>
10      </div>
11      <div className="grid gap-2">
12        <div className="grid grid-cols-3 items-center gap-4">
13          <Label htmlFor="width">Width</Label>
14          <Input id="width" defaultValue="100%" className="col-span-2" />
15        </div>
16        <div className="grid grid-cols-3 items-center gap-4">
17          <Label htmlFor="height">Height</Label>
18          <Input id="height" defaultValue="100%" className="col-span-2" />
19        </div>
20      </div>
21    </div>
22  </PopoverContent>
23</Popover>