Alert Dialog

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/base-vega/components/example"
5import {
6  AlertDialog,
7  AlertDialogAction,
8  AlertDialogCancel,
9  AlertDialogContent,
10  AlertDialogDescription,
11  AlertDialogFooter,
12  AlertDialogHeader,
13  AlertDialogMedia,
14  AlertDialogTitle,
15  AlertDialogTrigger,
16} from "@/registry/base-vega/ui/alert-dialog"
17import { Button } from "@/registry/base-vega/ui/button"
18import {
19  Dialog,
20  DialogContent,
21  DialogDescription,
22  DialogFooter,
23  DialogHeader,
24  DialogTitle,
25  DialogTrigger,
26} from "@/registry/base-vega/ui/dialog"
27import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
28 
29export default function AlertDialogExample() {
30  return (
31    <ExampleWrapper>
32      <AlertDialogBasic />
33      <AlertDialogSmall />
34      <AlertDialogWithMedia />
35      <AlertDialogSmallWithMedia />
36      <AlertDialogDestructive />
37      <AlertDialogInDialog />
38    </ExampleWrapper>
39  )
40}
41 
42function AlertDialogBasic() {
43  return (
44    <Example title="Basic" className="items-center">
45      <AlertDialog>
46        <AlertDialogTrigger
47          render={<Button variant="outline">Default</Button>}
48        />
49        <AlertDialogContent>
50          <AlertDialogHeader>
51            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
52            <AlertDialogDescription>
53              This action cannot be undone. This will permanently delete your
54              account and remove your data from our servers.
55            </AlertDialogDescription>
56          </AlertDialogHeader>
57          <AlertDialogFooter>
58            <AlertDialogCancel>Cancel</AlertDialogCancel>
59            <AlertDialogAction>Continue</AlertDialogAction>
60          </AlertDialogFooter>
61        </AlertDialogContent>
62      </AlertDialog>
63    </Example>
64  )
65}
66 
67function AlertDialogSmall() {
68  return (
69    <Example title="Small" className="items-center">
70      <AlertDialog>
71        <AlertDialogTrigger render={<Button variant="outline">Small</Button>} />
72        <AlertDialogContent size="sm">
73          <AlertDialogHeader>
74            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
75            <AlertDialogDescription>
76              Do you want to allow the USB accessory to connect to this device?
77            </AlertDialogDescription>
78          </AlertDialogHeader>
79          <AlertDialogFooter>
80            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
81            <AlertDialogAction>Allow</AlertDialogAction>
82          </AlertDialogFooter>
83// … truncated