Alert Dialog Destructive

1// shadcn
2import {
3  AlertDialog,
4  AlertDialogAction,
5  AlertDialogCancel,
6  AlertDialogContent,
7  AlertDialogDescription,
8  AlertDialogFooter,
9  AlertDialogHeader,
10  AlertDialogMedia,
11  AlertDialogTitle,
12  AlertDialogTrigger
13} from "@/components/ui/alert-dialog";
14import { Button } from "@/components/ui/button";
15
16// assets
17import { Trash } from "iconsax-reactjs";
18
19//  ------------------------------ | ALERT DIALOG - DESTRUCTIVE | ------------------------------  //
20
21export function AlertDialogDestructive() {
22  return (
23    <AlertDialog>
24      <AlertDialogTrigger
25        render={<Button variant="destructive">Delete Chat</Button>}
26      />
27      <AlertDialogContent size="sm">
28        <AlertDialogHeader>
29          <AlertDialogMedia className="bg-red-500/10 text-red-500 dark:bg-red-500/20 dark:text-red-500">
30            <Trash />
31          </AlertDialogMedia>
32          <AlertDialogTitle>Delete chat?</AlertDialogTitle>
33          <AlertDialogDescription>
34            This will permanently delete this chat conversation. View{" "}
35            <a href="#">Settings</a> delete any memories saved during this chat.
36          </AlertDialogDescription>
37        </AlertDialogHeader>
38        <AlertDialogFooter>
39          <AlertDialogCancel variant="outline">Cancel</AlertDialogCancel>
40          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
41        </AlertDialogFooter>
42      </AlertDialogContent>
43    </AlertDialog>
44  );
45}