Alert Dialog

1import { Button } from "@/components/ui/button";
2import {
3  ResponsiveDialog,
4  ResponsiveDialogClose,
5  ResponsiveDialogContent,
6  ResponsiveDialogDescription,
7  ResponsiveDialogFooter,
8  ResponsiveDialogHeader,
9  ResponsiveDialogTitle,
10  ResponsiveDialogTrigger,
11} from "@/components/ui/revola";
12
13export default function AlertDialog() {
14  return (
15    <ResponsiveDialog alert onlyDialog>
16      <ResponsiveDialogTrigger asChild>
17        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
18          Show Alert
19        </Button>
20      </ResponsiveDialogTrigger>
21      <ResponsiveDialogContent className="sm:max-w-[400px]">
22        <div className="p-6">
23          <ResponsiveDialogHeader className="gap-2">
24            <ResponsiveDialogTitle>Are you sure?</ResponsiveDialogTitle>
25            <ResponsiveDialogDescription>
26              Take a moment to review the details provided to ensure you understand the implications.
27            </ResponsiveDialogDescription>
28          </ResponsiveDialogHeader>
29
30          <ResponsiveDialogFooter className="mt-4 gap-2.5 sm:gap-2">
31            <ResponsiveDialogClose asChild>
32              <Button variant="secondary">Cancel</Button>
33            </ResponsiveDialogClose>
34
35            <ResponsiveDialogClose asChild>
36              <Button>Okay</Button>
37            </ResponsiveDialogClose>
38          </ResponsiveDialogFooter>
39        </div>
40      </ResponsiveDialogContent>
41    </ResponsiveDialog>
42  );
43}