Dialog

1import {
2  Dialog,
3  DialogClose,
4  DialogContent,
5  DialogFooter,
6  DialogTrigger,
7} from "passport-ui";
8import { Button } from "passport-ui";

1<Dialog>
2  <DialogTrigger asChild>
3    <Button>Open Dialog</Button>
4  </DialogTrigger>
5  <DialogContent className="w-sm">
6    <div className="meta-container">
7      <h3>Account Settings</h3>
8      <p>Manage your account settings and preferences here.</p>
9    </div>
10    <Separator />
11    <div className="meta-container">
12      <h3>Profile Information</h3>
13      <p>Update your personal details and contact information</p>
14    </div>
15    <DialogFooter>
16      <DialogClose asChild>
17        <Button variant="ghost">Cancel</Button>
18      </DialogClose>
19      <Button>Save Changes</Button>
20    </DialogFooter>
21  </DialogContent>
22</Dialog>