Alert dialog4

1import {
2  AlertDialog,
3  AlertDialogAction,
4  AlertDialogContent,
5  AlertDialogDescription,
6  AlertDialogFooter,
7  AlertDialogHeader,
8  AlertDialogTitle,
9  AlertDialogTrigger,
10} from "@/ui/alert-dialog";
11import { Button } from "@/ui/button";
12import { CheckCircle } from "@mynaui/icons-react";
13 
14export default function AlertDialog4() {
15  return (
16    <AlertDialog>
17      <AlertDialogTrigger asChild>
18        <Button>Show Success Message</Button>
19      </AlertDialogTrigger>
20      <AlertDialogContent>
21        <AlertDialogHeader className="text-center">
22          <div className="flex flex-col gap-2 text-center">
23            <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-green-50">
24              <CheckCircle className="size-6 text-green-600" />
25            </div>
26            <AlertDialogTitle>Password Reset Email Sent</AlertDialogTitle>
27            <AlertDialogDescription>
28              We&apos;ve sent a password reset link to your email address
29              (praveen@example.com) Please check your inbox and follow the
30              instructions.
31            </AlertDialogDescription>
32          </div>
33        </AlertDialogHeader>
34        <AlertDialogFooter className="sm:justify-center">
35          <AlertDialogAction>Okay</AlertDialogAction>
36        </AlertDialogFooter>
37      </AlertDialogContent>
38    </AlertDialog>
39  );
40}