Alert dialog5

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 { DangerTriangle } from "@mynaui/icons-react";
13 
14export default function AlertDialog5() {
15  return (
16    <AlertDialog>
17      <AlertDialogTrigger asChild>
18        <Button>Show Error Message</Button>
19      </AlertDialogTrigger>
20      <AlertDialogContent>
21        <AlertDialogHeader>
22          <div className="flex flex-col gap-2 text-center">
23            <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-red-50">
24              <DangerTriangle className="size-6 text-red-600" />
25            </div>
26            <AlertDialogTitle>Invalid Email Address</AlertDialogTitle>
27            <AlertDialogDescription>
28              Please enter a valid email address in the format name@example.com.
29            </AlertDialogDescription>
30          </div>
31        </AlertDialogHeader>
32        <AlertDialogFooter className="sm:justify-center">
33          <AlertDialogAction>Okay</AlertDialogAction>
34        </AlertDialogFooter>
35      </AlertDialogContent>
36    </AlertDialog>
37  );
38}