Alert dialog2

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 AlertDialog2() {
16  return (
17    <AlertDialog>
18      <AlertDialogTrigger asChild>
19        <Button>Show Icon Dialog</Button>
20      </AlertDialogTrigger>
21      <AlertDialogContent>
22        <AlertDialogHeader className="mb-4 items-center gap-2 md:flex-row md:items-start md:gap-4">
23          <div
24            aria-hidden="true"
25            className="shrink-0 rounded-full bg-red-50 p-3 dark:bg-red-900"
26          >
27            <Trash className="size-6 text-red-600 dark:text-red-200" />
28          </div>
29          <div className="flex flex-col gap-2">
30            <AlertDialogTitle>Delete Account?</AlertDialogTitle>
31            <AlertDialogDescription>
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>
38          <AlertDialogCancel>Cancel</AlertDialogCancel>
39          <AlertDialogAction
40            className={buttonVariants({ variant: "destructive" })}
41          >
42            Continue
43          </AlertDialogAction>
44        </AlertDialogFooter>
45      </AlertDialogContent>
46    </AlertDialog>
47  );
48}