Toast

"use client"

import { Button } from "@/components/ui/button"
import { toastManager } from "@/components/ui/toast"

export default function ToastDemo() {
  return (
    <Button
      variant="outline"
      onClick={() => {
        toastManager.add({
          title: "Event has been created",
          description: "Monday, January 3rd at 6:00pm",
        })
      }}
    >
      Default Toast
    </Button>
  )
}

"use client"

import { Button } from "@/components/ui/button"
import { toastManager } from "@/components/ui/toast"

export default function ToastWithStatus() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant="outline"
        onClick={() => {
          toastManager.add({
            title: "Success!",
            description: "Your changes have been saved.",
            type: "success",
          })
        }}
      >
        Success Toast
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          toastManager.add({
            title: "Uh oh! Something went wrong.",
            description: "There was a problem with your request.",
            type: "error",
          })
        }}
      >
        Error Toast
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          toastManager.add({
            title: "Heads up!",
            description: "You can add components to your app using the cli.",
            type: "info",
          })
        }}
      >
        Info Toast
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          toastManager.add({
            title: "Warning!",
            description: "Your session is about to expire.",
            type: "warning",
          })
        }}
      >
        Warning Toast
      </Button>
    </div>
  )
}

"use client"

import { Button } from "@/components/ui/button"
import { toastManager } from "@/components/ui/toast"

export default function ToastLoading() {
  return (
    <Button
      variant="outline"
      onClick={() => {
        toastManager.add({
          title: "Loading…",
          description: "Please wait while we process your request.",
          type: "loading",
        })
      }}
    >
      Loading Toast
    </Button>
  )
}

"use client"

import { Button } from "@/components/ui/button"
import { toastManager } from "@/components/ui/toast"

export default function ToastWithAction() {
  return (
    <Button
      variant="outline"
      onClick={() => {
        const id = toastManager.add({
          title: "Action performed",
          description: "You can undo this action.",
          type: "success",
          actionProps: {
            children: "Undo",
            onClick: () => {
              toastManager.close(id)
              toastManager.add({
                title: "Action undone",
                description: "The action has been reverted.",
                type: "info",
              })
            },
          },
          timeout: 1000000,
        })
      }}
    >
      Perform Action
    </Button>
  )
}

"use client"

import { Button } from "@/components/ui/button"
import { toastManager } from "@/components/ui/toast"

export default function ToastPromise() {
  return (
    <Button
      variant="outline"
      onClick={() => {
        toastManager.promise(
          new Promise<string>((resolve, reject) => {
            const shouldSucceed = Math.random() > 0.3
            setTimeout(() => {
              if (shouldSucceed) {
                resolve("Data loaded successfully")
              } else {
                reject(new Error("Failed to load data"))
              }
            }, 2000)
          }),
          {
            loading: {
              title: "Loading…",
              description: "The promise is loading.",
            },
            success: (data: string) => ({
              title: "This is a success toast!",
              description: `Success: ${data}`,
            }),
            error: () => ({
              title: "Something went wrong",
              description: "Please try again.",
            }),
          }
        )
      }}
    >
      Run Promise
    </Button>
  )
}

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { toastManager } from "@/components/ui/toast"

const TEXTS = [
  "Short message.",
  "A bit longer message that spans two lines.",
  "This is a longer description that intentionally takes more vertical space to demonstrate stacking with varying heights.",
  "An even longer description that should span multiple lines so we can verify the clamped collapsed height and smooth expansion animation when hovering or focusing the viewport.",
]

export default function ToastHeights() {
  const [count, setCount] = React.useState(0)

  function createToast() {
    setCount((prev) => prev + 1)
    const description = TEXTS[Math.floor(Math.random() * TEXTS.length)]
    toastManager.add({
      title: `Toast ${count + 1} created`,
      description,
    })
  }

  return (
    <Button variant="outline" onClick={createToast}>
      With Varying Heights
    </Button>
  )
}