64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { useState } from "react";
|
|
|
|
interface CustomDialogProps {
|
|
open: boolean;
|
|
onConfirm: (ok: boolean) => void;
|
|
title?: string;
|
|
description?: string;
|
|
cancelLabel?: string;
|
|
confirmLabel?: string;
|
|
}
|
|
|
|
export const CustomDialog = ({
|
|
open,
|
|
onConfirm,
|
|
title,
|
|
description,
|
|
cancelLabel,
|
|
confirmLabel,
|
|
}: CustomDialogProps) => {
|
|
const [closedByAction, setClosedByAction] = useState(false);
|
|
|
|
const handleClose = (ok: boolean) => {
|
|
setClosedByAction(true);
|
|
onConfirm(ok);
|
|
};
|
|
|
|
return (
|
|
<AlertDialog
|
|
onOpenChange={(nextOpen) => {
|
|
if (!(nextOpen || closedByAction)) onConfirm(false);
|
|
if (nextOpen) setClosedByAction(false);
|
|
}}
|
|
open={open}
|
|
>
|
|
<AlertDialogContent className="max-w-md rounded-2xl border border-border shadow-lg">
|
|
<AlertDialogHeader className="space-y-2">
|
|
<AlertDialogTitle className="text-lg font-semibold">{title}</AlertDialogTitle>
|
|
<AlertDialogDescription aria-live="assertive" className="text-sm text-muted-foreground">
|
|
{description}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter className="mt-12">
|
|
<AlertDialogCancel autoFocus className="min-w-[120px]">
|
|
{cancelLabel}
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction className="min-w-[120px] bg-destructive text-white hover:bg-destructive/90">
|
|
{confirmLabel}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
};
|