Alert Dialog with Icon

1import { CircleAlertIcon } from "lucide-react";
2
3import { Button } from "@/components/ui/button";
4import {
5  ResponsiveDialog,
6  ResponsiveDialogClose,
7  ResponsiveDialogContent,
8  ResponsiveDialogDescription,
9  ResponsiveDialogFooter,
10  ResponsiveDialogHeader,
11  ResponsiveDialogTitle,
12  ResponsiveDialogTrigger,
13} from "@/components/ui/revola";
14
15export default function AlertIconDialog() {
16  return (
17    <ResponsiveDialog alert onlyDialog>
18      <ResponsiveDialogTrigger asChild>
19        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
20          Alert with Icon
21        </Button>
22      </ResponsiveDialogTrigger>
23      <ResponsiveDialogContent className="sm:max-w-[400px]">
24        <div className="p-6">
25          <div className="flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4">
26            <div className="flex size-9 shrink-0 items-center justify-center rounded-full border" aria-hidden="true">
27              <CircleAlertIcon className="opacity-80" size={16} />
28            </div>
29            <ResponsiveDialogHeader className="pt-2 sm:pt-0">
30              <ResponsiveDialogTitle>Are you sure?</ResponsiveDialogTitle>
31              <ResponsiveDialogDescription>
32                Are you sure you want to delete your account? All your data will be removed.
33              </ResponsiveDialogDescription>
34            </ResponsiveDialogHeader>
35          </div>
36
37          <ResponsiveDialogFooter className="mt-4 gap-2.5 sm:gap-2">
38            <ResponsiveDialogClose asChild>
39              <Button variant="secondary">Cancel</Button>
40            </ResponsiveDialogClose>
41            <ResponsiveDialogClose asChild>
42              <Button>Confirm</Button>
43            </ResponsiveDialogClose>
44          </ResponsiveDialogFooter>
45        </div>
46      </ResponsiveDialogContent>
47    </ResponsiveDialog>
48  );
49}