Toast

import { toaster } from "@kobalte/core"
 
import {
  Toast,
  ToastContent,
  ToastProgress,
  ToastTitle,
} from "@/components/ui/toast"

toaster.show((props) => (
  <Toast toastId={props.toastId}>
    <ToastContent>
      <ToastTitle>Toast</ToastTitle>
    </ToastContent>
    <ToastProgress />
  </Toast>
))

import { ToastList, ToastRegion } from "@/components/ui/toast"
 
const App = () => {
  return (
    <Router
      root={(props) => (
        <Suspense>
          <ColorModeScript />
          <ColorModeProvider>
            {props.children}
            <ToastRegion>
              <ToastList />
            </ToastRegion>
          </ColorModeProvider>
        </Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  )
}
 
export default App