Popover

import { Popover } from "@/components/ui";

1<div className="flex gap-4">
2  <Popover
3    side="top"
4    trigger={<Button variant="outline">Top</Button>}
5    content={<p>Top popover content</p>}
6  />
7  <Popover
8    side="right"
9    trigger={<Button variant="outline">Right</Button>}
10    content={<p>Right popover content</p>}
11  />
12  <Popover
13    side="bottom"
14    trigger={<Button variant="outline">Bottom</Button>}
15    content={<p>Bottom popover content</p>}
16  />
17  <Popover
18    side="left"
19    trigger={<Button variant="outline">Left</Button>}
20    content={<p>Left popover content</p>}
21  />
22</div>

1<Popover
2  trigger={<Button>Update dimensions</Button>}
3  content={
4    <div className="space-y-4 w-64">
5      <div className="space-y-2">
6        <Label htmlFor="width">Width</Label>
7        <Input id="width" defaultValue="100%" />
8      </div>
9      <div className="space-y-2">
10        <Label htmlFor="height">Height</Label>
11        <Input id="height" defaultValue="auto" />
12      </div>
13      <Button className="w-full">Save</Button>
14    </div>
15  }
16/>