Customized Header Alert Dialog

1import { OctagonAlert, X } from "lucide-react";
2import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
3import {
4  AlertDialog,
5  AlertDialogAction,
6  AlertDialogCancel,
7  AlertDialogContent,
8  AlertDialogDescription,
9  AlertDialogFooter,
10  AlertDialogHeader,
11  AlertDialogTitle,
12  AlertDialogTrigger,
13} from "@/registry/ui/alert-dialog";
14import { Button } from "@/registry/ui/button";
15 
16export default function AlertDialogWithCustomizedHeader() {
17  return (
18    <AlertDialog>
19      <AlertDialogTrigger asChild>
20        <Button variant="outline">Show Dialog</Button>
21      </AlertDialogTrigger>
22      <AlertDialogContent>
23        <div className="-mx-4 -mt-1 flex items-center justify-between border-b px-4 pb-3">
24          <AlertDialogTitle>Delete Account</AlertDialogTitle>
25          <AlertDialogPrimitive.Cancel asChild>
26            <Button size="icon-sm" variant="ghost">
27              <X />
28            </Button>
29          </AlertDialogPrimitive.Cancel>
30        </div>
31        <AlertDialogHeader className="pt-2">
32          <AlertDialogTitle>
33            <div className="mx-auto mb-4 flex h-9 w-9 items-center justify-center rounded-full bg-destructive/10 sm:mx-0">
34              <OctagonAlert className="h-5 w-5 text-destructive" />
35            </div>
36            Are you absolutely sure?
37          </AlertDialogTitle>
38          <AlertDialogDescription className="text-[15px]">
39            This action cannot be undone. This will permanently delete your
40            account and remove your data from our servers.
41          </AlertDialogDescription>
42        </AlertDialogHeader>
43        <AlertDialogFooter className="mt-2">
44          <AlertDialogCancel variant="ghost">Cancel</AlertDialogCancel>
45          <AlertDialogAction variant="destructive">Continue</AlertDialogAction>
46        </AlertDialogFooter>
47      </AlertDialogContent>
48    </AlertDialog>
49  );
50}