74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
DialogRoot,
|
|
DialogBackdrop,
|
|
DialogPositioner,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from "@seed-design/react";
|
|
import { MercuryButton } from "@/ds";
|
|
import { assetsStrings as s } from "./strings";
|
|
|
|
export interface ConfirmDialogProps {
|
|
open: boolean;
|
|
title: string;
|
|
description?: string;
|
|
confirmLabel?: string;
|
|
destructive?: boolean;
|
|
busy?: boolean;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
/**
|
|
* A confirmation dialog built on Seed's `Dialog` primitives — used for every
|
|
* destructive/irreversible action in the assets + lending feature (delete,
|
|
* revalue) instead of a native `window.confirm`, per Mercury's UI
|
|
* conventions (mirrors iOS's `seedDialog`).
|
|
*/
|
|
export function ConfirmDialog({
|
|
open,
|
|
title,
|
|
description,
|
|
confirmLabel = s.common.delete,
|
|
destructive = true,
|
|
busy = false,
|
|
onConfirm,
|
|
onCancel,
|
|
}: ConfirmDialogProps) {
|
|
return (
|
|
<DialogRoot
|
|
open={open}
|
|
onOpenChange={(next) => {
|
|
if (!next) onCancel();
|
|
}}
|
|
>
|
|
<DialogBackdrop />
|
|
<DialogPositioner>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</DialogHeader>
|
|
{description && <DialogDescription>{description}</DialogDescription>}
|
|
<DialogFooter style={{ display: "flex", gap: 12, paddingTop: 16 }}>
|
|
<MercuryButton variant="secondary" onClick={onCancel} style={{ flex: 1 }} disabled={busy}>
|
|
{s.common.cancel}
|
|
</MercuryButton>
|
|
<MercuryButton
|
|
variant="primary"
|
|
onClick={onConfirm}
|
|
loading={busy}
|
|
style={{ flex: 1, ...(destructive ? { background: "var(--seed-color-fg-critical)", color: "#fff" } : {}) }}
|
|
>
|
|
{confirmLabel}
|
|
</MercuryButton>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</DialogPositioner>
|
|
</DialogRoot>
|
|
);
|
|
}
|