Alert dialog3

1import {
2  AlertDialog,
3  AlertDialogAction,
4  AlertDialogCancel,
5  AlertDialogContent,
6  AlertDialogDescription,
7  AlertDialogFooter,
8  AlertDialogHeader,
9  AlertDialogTitle,
10  AlertDialogTrigger,
11} from "@/ui/alert-dialog";
12import { Button, buttonVariants } from "@/ui/button";
13import { Trash } from "@mynaui/icons-react";
14 
15export default function AlertDialog3() {
16  return (
17    <AlertDialog>
18      <AlertDialogTrigger asChild>
19        <Button>Show Centered Dialog</Button>
20      </AlertDialogTrigger>
21      <AlertDialogContent>
22        <AlertDialogHeader>
23          <div className="flex flex-col gap-2 text-center">
24            <div
25              aria-hidden="true"
26              className="shrink-0 rounded-full bg-red-50 p-3 dark:bg-red-900 mx-auto"
27            >
28              <Trash className="size-6 text-red-600 dark:text-red-200" />
29            </div>
30            <AlertDialogTitle>Delete Account?</AlertDialogTitle>
31            <AlertDialogDescription className="text-balance">
32              Deleting your account is irreversible and will erase all your
33              data. This action cannot be undone.
34            </AlertDialogDescription>
35          </div>
36        </AlertDialogHeader>
37        <AlertDialogFooter className="sm:justify-between">
38          <AlertDialogCancel>Cancel</AlertDialogCancel>
39          <AlertDialogAction
40            className={buttonVariants({ variant: "destructive" })}
41          >
42            Continue
43          </AlertDialogAction>
44        </AlertDialogFooter>
45      </AlertDialogContent>
46    </AlertDialog>
47  );
48}