Toast

import { ToastProvider, toastManager } from "@craftdotui/baseui/components/toast";

// Wrap your app with ToastProvider
function App() {
  return (
    <ToastProvider position="bottom-right">
      {/* Your app */}
    </ToastProvider>
  );
}

// Show toasts anywhere
toastManager.add({
  title: "Success!",
  description: "Your changes have been saved.",
  type: "success",
});

toastManager.add({
  title: "Success",
  description: "Operation completed successfully.",
  type: "success",
});

toastManager.add({
  title: "Error",
  description: "Something went wrong. Please try again.",
  type: "error",
});

toastManager.add({
  title: "Update Available",
  description: "A new version is ready to install.",
  type: "info",
  actionProps: {
    children: "Update",
    onClick: () => window.location.reload(),
  },
});

const toastId = toastManager.add({
  title: "Uploading...",
  type: "loading",
  duration: Infinity, // Don't auto-dismiss
});

// Later, update or remove
toastManager.remove(toastId);

toastManager.add({
  title: "Quick message",
  duration: 2000, // 2 seconds
});

<ToastProvider position="top-center">
  {/* Toasts appear at top-center */}
</ToastProvider>

<ToastProvider position="bottom-left">
  {/* Toasts appear at bottom-left */}
</ToastProvider>