Animated components for Windsurf

app/layout.tsx

// app/layout.tsx: mount the stack once, every page can fire toasts
import type { ReactNode } from "react";
import { Toaster } from "qodesign-free/toast-stack";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

components/save-button.tsx

"use client";
// components/save-button.tsx: any client component can call toast()
import { toast } from "qodesign-free/toast-stack";

export function SaveButton({ save }: { save: () => Promise<void> }) {
  return (
    <button
      onClick={() =>
        toast.promise(save(), {
          loading: { title: "Saving..." },
          success: () => ({ title: "Saved" }),
          error: () => ({ title: "Couldn't save", description: "Try again in a moment." }),
        })
      }
    >
      Save
    </button>
  );
}