Spaces:
Sleeping
Sleeping
File size: 1,772 Bytes
74b1b27 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | type SaveBeforeLeaveDialogProps = {
open: boolean;
onWait: () => void | Promise<void>;
onProceed: () => void;
onCancel: () => void;
};
export function SaveBeforeLeaveDialog({
open,
onWait,
onProceed,
onCancel,
}: SaveBeforeLeaveDialogProps) {
if (!open) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/35 px-4">
<div className="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-lg">
<h3 className="text-base font-semibold text-gray-900">
Changes are still saving
</h3>
<p className="mt-2 text-sm text-gray-600">
Your latest edits may not be saved yet. You can wait for save to
finish and continue automatically, or leave this page now.
</p>
<div className="mt-4 flex flex-wrap justify-end gap-2">
<button
type="button"
onClick={onCancel}
className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition"
>
Cancel
</button>
<button
type="button"
onClick={onProceed}
className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-semibold text-red-700 hover:bg-red-100 transition"
>
Leave without waiting
</button>
<button
type="button"
onClick={() => {
void onWait();
}}
className="rounded-lg bg-emerald-600 px-3 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition"
>
Wait and continue
</button>
</div>
</div>
</div>
);
}
|