Toast

import { Duration } from "effect";
import { Button } from "@gpuixui/primitives";
import {
  ToastProvider,
  ToastViewport,
  useToast,
} from "@gpuixui/components/toast";

const PublishBar = () => {
  const toast = useToast();

  return (
    <Button
      onActivate={() =>
        toast.push(
          {
            title: "Changes published",
            description: "The site rebuilds in about a minute.",
            tone: "success",
            action: { label: "Undo" },
            duration: Duration.seconds(8),
          },
          { onAction: () => restore() },
        )
      }
    >
      Publish changes
    </Button>
  );
};

export const App = () => (
  <ToastProvider>
    <PublishBar />
    {/* Render the viewport last. */}
    <ToastViewport />
  </ToastProvider>
);

const rows = await toast.promise(importRows(file), {
  loading: { title: "Importing rows", description: "Reading the file…" },
  success: (count) => ({ title: `Imported ${count} rows`, tone: "success" }),
  error: (cause) => ({ title: "Import failed", description: String(cause), tone: "danger" }),
});

ToastProvider
└── ToastViewport