// title: Unsaved changes reminder with save and discard actions "use client"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { toastManager } from "@/registry/default/ui/toast"; type SaveState = "clean" | "dirty" | "saving"; export function Pattern() { const [saveState, setSaveState] = useState("clean"); const [content, setContent] = useState( "Q4 launch plan\n\nShip the new onboarding flow by Nov 14. Design review is on Thursday.", ); const toastIdRef = { current: null as string | null }; const makeChange = () => { if (saveState === "dirty") return; setContent((c) => `${c} Updated.`); setSaveState("dirty"); const id = toastManager.add({ actionProps: { children: "Save now", onClick: () => save(id), }, description: "Your recent edits haven't been saved yet.", timeout: 0, title: "Unsaved changes", type: "warning", }); toastIdRef.current = id; }; const save = (id?: string) => { const toastId = id ?? toastIdRef.current; if (toastId) toastManager.close(toastId); setSaveState("saving"); setTimeout(() => { setSaveState("clean"); toastManager.add({ description: "All changes have been saved to the server.", title: "Document saved", type: "success", }); }, 900); }; return (

{content}

); }