Popover

1import {
2  Popover,
3  PopoverTrigger,
4  PopoverContent,
5} from "@ecos/ui";
6
7<Popover>
8  <PopoverTrigger asChild>
9    <Button>Open Popover</Button>
10  </PopoverTrigger>
11
12  <PopoverContent>Additional information appears here.</PopoverContent>
13</Popover>

1<Popover>
2  <PopoverTrigger asChild>
3    <Button>Product Details</Button>
4  </PopoverTrigger>
5
6  <PopoverContent>View additional product information.</PopoverContent>
7</Popover>

1<Popover>
2<PopoverTrigger asChild>
3  <Button>Order Summary</Button>
4</PopoverTrigger>
5
6<PopoverContent>
7  <div className="space-y-2">
8    <TypographyH4 className="font-medium">Order #12345</TypographyH4>
9
10    <TypographyP>Gold Sheet x2</TypographyP>
11    <TypographyP>Total: £250.00</TypographyP>
12  </div>
13</PopoverContent>
14</Popover>

1const [open, setOpen] = React.useState(false);
2
3<Popover
4  open={open}
5  onOpenChange={setOpen}
6>
7  <PopoverTrigger asChild>
8    <Button>
9      Toggle
10    </Button>
11  </PopoverTrigger>
12
13  <PopoverContent>
14    Controlled popover content.
15  </PopoverContent>
16</Popover>

1<Popover>
2  <PopoverTrigger asChild>
3    <Button>Positioned Popover</Button>
4  </PopoverTrigger>
5  
6  <PopoverContent
7    side="right"
8    align="start"
9    sideOffset={8}
10  >
11    Positioned content
12  </PopoverContent>
13</Popover>

1<Popover>
2  <PopoverTrigger asChild>
3    <Button>
4      Large Content
5    </Button>
6  </PopoverTrigger>
7
8  <PopoverContent className="w-96">
9    Extended content area.
10  </PopoverContent>
11</Popover>

1<Popover>
2  <PopoverAnchor />
3
4  <PopoverTrigger asChild>
5    <Button>
6      Open
7    </Button>
8  </PopoverTrigger>
9
10  <PopoverContent>
11    Anchored content.
12  </PopoverContent>
13</Popover>

1<Popover>
2  <PopoverTrigger asChild>
3    <Button>Profile</Button>
4  </PopoverTrigger>
5
6  <PopoverContent>
7    <Card>
8      <CardContent className="space-y-3 p-4">
9        <Avatar>
10          ...
11        </Avatar>
12
13        <div>
14          <TypographyP className="font-medium">
15            John Smith
16          </TypographyP>
17
18          <TypographyP>
19            john@example.com
20          </TypographyP>
21        </div>
22
23        <Button size="small">View Profile</Button>
24      </CardContent>
25    </Card>
26  </PopoverContent>
27</Popover>