Files
jiang13-bbs/frontend/components/ConfirmDialog.tsx

66 lines
1.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import Modal from "@/components/Modal";
/**
* 站点风格确认框:基于 Modal,仅取消/关闭可关,避免点遮罩误关。
* danger 主按钮使用 btn-danger,其余用 btn-primary。
*/
export default function ConfirmDialog({
open,
title,
message,
confirmLabel = "确定",
cancelLabel = "取消",
danger = false,
busy = false,
onConfirm,
onCancel,
}: {
open: boolean;
title: string;
message: string;
confirmLabel?: string;
cancelLabel?: string;
danger?: boolean;
busy?: boolean;
onConfirm: () => void;
onCancel: () => void;
}) {
return (
<Modal
open={open}
title={title}
onClose={onCancel}
busy={busy}
zIndexClass="z-[1100]"
maxWidthClass="max-w-sm"
panelClassName="p-5"
footer={
<>
<button
type="button"
onClick={onCancel}
disabled={busy}
className="btn btn-line btn-sm"
>
{cancelLabel}
</button>
<button
type="button"
onClick={onConfirm}
disabled={busy}
className={`btn btn-sm ${danger ? "btn-danger" : "btn-primary"}`}
>
{busy ? "处理中…" : confirmLabel}
</button>
</>
}
>
<p className="text-[13.5px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
{message}
</p>
</Modal>
);
}