Alert Dialog

1"use client";
2 
3import {
4  AlertDialog,
5  AlertDialogAction,
6  AlertDialogCancel,
7  AlertDialogContent,
8  AlertDialogDescription,
9  AlertDialogFooter,
10  AlertDialogHeader,
11  AlertDialogTitle,
12  AlertDialogTrigger
13} from "@/components/ui/alert-dialog";
14import { Button } from "@/components/ui/button";
15import { useState } from "react";
16 
17export default function AlertDialogDemo() {
18  const [open, setOpen] = useState(true);
19 
20  return (
21    <AlertDialog open={open} onOpenChange={setOpen}>
22      <AlertDialogTrigger asChild>
23        <Button variant="outline">Show Dialog</Button>
24      </AlertDialogTrigger>
25      <AlertDialogContent>
26        <AlertDialogHeader>
27          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
28          <AlertDialogDescription>
29            This action cannot be undone. This will permanently delete your account and remove your
30            data from our servers.
31          </AlertDialogDescription>
32        </AlertDialogHeader>
33        <AlertDialogFooter>
34          <AlertDialogCancel>Cancel</AlertDialogCancel>
35          <AlertDialogAction>Continue</AlertDialogAction>
36        </AlertDialogFooter>
37      </AlertDialogContent>
38    </AlertDialog>
39  );
40}