Drawer

1import {
2  Drawer,
3  DrawerClose,
4  DrawerContent,
5  DrawerFooter,
6  DrawerTrigger,
7} from "passport-ui";
8import { Button } from "passport-ui";

1<Drawer>
2  <DrawerTrigger asChild>
3    <Button variant="outline">Open Drawer</Button>
4  </DrawerTrigger>
5  <DrawerContent>
6    <div className="mx-auto w-full max-w-sm section-container">
7      <div className="meta-container">
8        <h3>Drawer component</h3>
9        <p>
10          Add your content here. Use Drawer to confirm actions, and this
11          looks better in mobile layouts.
12        </p>
13      </div>
14      <DrawerFooter>
15        <Button>Submit</Button>
16        <DrawerClose asChild>
17          <Button variant="primary">Close</Button>
18        </DrawerClose>
19      </DrawerFooter>
20    </div>
21  </DrawerContent>
22</Drawer>