Toast

import { Toaster } from "@/components/redpanda-ui/toast"

export function App({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

import { toast } from "@/components/redpanda-ui/toast"

toast.add({
  title: "Event created",
  description: "Sunday, December 3 at 9:00 AM",
})

<Toaster>
└── <ToastProvider>
    └── <ToastPortal>
        └── <ToastViewport>
            └── <Toast>
                └── <ToastContent>
                    ├── Status icon
                    ├── <ToastTitle>
                    ├── <ToastDescription>
                    ├── <ToastAction>
                    └── <ToastClose>

toast.add({
  type: "success",
  title: "Settings saved",
})

const id = toast.add({
  title: "Event created",
  actionProps: {
    children: "Undo",
    onClick: () => toast.close(id),
  },
})

toast.promise(createEvent(), {
  loading: "Creating event…",
  success: "Event created.",
  error: "Could not create event.",
})

import { createToastManager, Toaster } from "@/components/redpanda-ui/toast"

const localToast = createToastManager()

export function LocalToaster() {
  return <Toaster toastManager={localToast} />
}