75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||
|
|
import {
|
||
|
|
AlertDialog,
|
||
|
|
AlertDialogAction,
|
||
|
|
AlertDialogCancel,
|
||
|
|
AlertDialogDescription,
|
||
|
|
AlertDialogFooter,
|
||
|
|
AlertDialogHeader,
|
||
|
|
AlertDialogOverlay,
|
||
|
|
AlertDialogPortal,
|
||
|
|
AlertDialogTitle,
|
||
|
|
} from "@/components/ui/alert-dialog";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
/** Above BrandDrawer (z-110) and ShareDialog (z-120). */
|
||
|
|
const EQ_OVERWRITE_DIALOG_Z = "z-[130]";
|
||
|
|
|
||
|
|
export function PeqOverwriteConfirmDialog({
|
||
|
|
open,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
cancelLabel,
|
||
|
|
confirmLabel,
|
||
|
|
onConfirm,
|
||
|
|
onCancel,
|
||
|
|
}: {
|
||
|
|
open: boolean;
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
cancelLabel: string;
|
||
|
|
confirmLabel: string;
|
||
|
|
onConfirm: () => void;
|
||
|
|
onCancel: () => void;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<AlertDialog
|
||
|
|
open={open}
|
||
|
|
onOpenChange={(next) => {
|
||
|
|
if (!next) onCancel();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<AlertDialogPortal>
|
||
|
|
<AlertDialogOverlay className={cn(EQ_OVERWRITE_DIALOG_Z, "bg-black/65")} />
|
||
|
|
<AlertDialogPrimitive.Content
|
||
|
|
className={cn(
|
||
|
|
EQ_OVERWRITE_DIALOG_Z,
|
||
|
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[42%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-md border-white/10 bg-zinc-900 text-white",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<AlertDialogHeader>
|
||
|
|
<AlertDialogTitle className="text-white">{title}</AlertDialogTitle>
|
||
|
|
<AlertDialogDescription className="text-white/60">
|
||
|
|
{description}
|
||
|
|
</AlertDialogDescription>
|
||
|
|
</AlertDialogHeader>
|
||
|
|
<AlertDialogFooter>
|
||
|
|
<AlertDialogCancel
|
||
|
|
className="border-white/20 bg-transparent text-white hover:bg-white/10"
|
||
|
|
onClick={onCancel}
|
||
|
|
>
|
||
|
|
{cancelLabel}
|
||
|
|
</AlertDialogCancel>
|
||
|
|
<AlertDialogAction
|
||
|
|
className="bg-[#00FFF6] text-black hover:brightness-95 focus-visible:ring-[#00FFF6]"
|
||
|
|
onClick={onConfirm}
|
||
|
|
>
|
||
|
|
{confirmLabel}
|
||
|
|
</AlertDialogAction>
|
||
|
|
</AlertDialogFooter>
|
||
|
|
</AlertDialogPrimitive.Content>
|
||
|
|
</AlertDialogPortal>
|
||
|
|
</AlertDialog>
|
||
|
|
);
|
||
|
|
}
|