58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { Trans } from "@lingui/react/macro";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@rakazo/ui-web";
|
|
import type { ReactNode } from "react";
|
|
|
|
export function ConfirmDialog({
|
|
open,
|
|
title,
|
|
description,
|
|
action,
|
|
destructive = false,
|
|
onConfirm,
|
|
onCancel,
|
|
}: {
|
|
open: boolean;
|
|
title: ReactNode;
|
|
description?: ReactNode;
|
|
action: ReactNode;
|
|
destructive?: boolean;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}) {
|
|
return (
|
|
<AlertDialog
|
|
open={open}
|
|
onOpenChange={(next) => {
|
|
if (!next) onCancel();
|
|
}}
|
|
>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{title}</AlertDialogTitle>
|
|
{description ? <AlertDialogDescription>{description}</AlertDialogDescription> : null}
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>
|
|
<Trans>Cancel</Trans>
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
variant={destructive ? "destructive" : "default"}
|
|
onClick={() => onConfirm()}
|
|
>
|
|
{action}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|