Toast

import { ToastProvider } from "fromsrc/client";

export default function Layout({ children }) {
  return <ToastProvider>{children}</ToastProvider>;
}

import { useToast } from "fromsrc/client";

function SaveButton() {
  const { add } = useToast();

  return (
    <button
      onClick={() =>
        add({
          type: "success",
          message: "changes saved",
        })
      }
    >
      save
    </button>
  );
}

add({ type: "info", message: "new version available" });

add({ type: "success", message: "file uploaded" });

add({ type: "warning", message: "low storage" });

add({ type: "error", message: "connection failed" });

add({
  type: "info",
  message: "processing...",
  duration: 5000,
});

const { toasts, remove } = useToast();

toasts.map((toast) => (
  <button onClick={() => remove(toast.id)}>dismiss</button>
));