Alert Dialog

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/bases/radix/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/bases/radix/ui/alert-dialog"
17import { Button } from "@/registry/bases/radix/ui/button"
18import {
19  Dialog,
20  DialogContent,
21  DialogDescription,
22  DialogFooter,
23  DialogHeader,
24  DialogTitle,
25  DialogTrigger,
26} from "@/registry/bases/radix/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 asChild>
47          <Button variant="outline">Default</Button>
48        </AlertDialogTrigger>
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 asChild>
72          <Button variant="outline">Small</Button>
73        </AlertDialogTrigger>
74        <AlertDialogContent size="sm">
75          <AlertDialogHeader>
76            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
77            <AlertDialogDescription>
78              Do you want to allow the USB accessory to connect to this device?
79            </AlertDialogDescription>
80          </AlertDialogHeader>
81          <AlertDialogFooter>
82            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
83// … truncated