josh
a82045d1bd
Build and push image / build (push) Successful in 50s
Add react-router-dom for URL-based navigation with browser back/forward, deep links, and bookmarks. Replace window.confirm() with styled ConfirmDialog. Add toast notifications and success feedback on consume/audit/gone flows. Add escape-to-close and focus trapping on modals. Add entrance animations for drawers, modals, and toasts. Make grids responsive, add sortable inventory headers, working CSV/JSON export, time-aware greeting, focus-visible outlines, search clear button, and hover chevrons on inventory rows. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import { Btn } from "../primitives/index.js";
|
|
import { ModalBackdrop, ModalFooter } from "./ModalChrome.js";
|
|
|
|
export function ConfirmDialog({
|
|
title,
|
|
message,
|
|
confirmLabel = "Delete",
|
|
confirmVariant = "danger",
|
|
onConfirm,
|
|
onCancel,
|
|
isPending = false,
|
|
}: {
|
|
title: string;
|
|
message: string;
|
|
confirmLabel?: string;
|
|
confirmVariant?: "danger" | "primary";
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
isPending?: boolean;
|
|
}) {
|
|
return (
|
|
<ModalBackdrop onClose={onCancel}>
|
|
<div
|
|
style={{
|
|
width: "min(460px, 96vw)",
|
|
margin: "120px 20px",
|
|
background: "var(--bg)",
|
|
border: "1px solid var(--line)",
|
|
borderRadius: "var(--r-lg)",
|
|
boxShadow: "var(--shadow-lg)",
|
|
}}
|
|
>
|
|
<div style={{ padding: "28px 32px 8px" }}>
|
|
<h2
|
|
className="serif"
|
|
style={{ fontSize: 24, margin: 0, fontWeight: 500, lineHeight: 1.2 }}
|
|
>
|
|
{title}
|
|
</h2>
|
|
<p style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 10, lineHeight: 1.5 }}>
|
|
{message}
|
|
</p>
|
|
</div>
|
|
<ModalFooter>
|
|
<div />
|
|
<div style={{ display: "flex", gap: 8 }}>
|
|
<Btn variant="ghost" onClick={onCancel}>
|
|
Cancel
|
|
</Btn>
|
|
<Btn
|
|
variant={confirmVariant}
|
|
disabled={isPending}
|
|
onClick={onConfirm}
|
|
>
|
|
{isPending ? "Deleting…" : confirmLabel}
|
|
</Btn>
|
|
</div>
|
|
</ModalFooter>
|
|
</div>
|
|
</ModalBackdrop>
|
|
);
|
|
}
|