Toast Notification

toaster.create({
  action: {
    label: "Action",
    onClick: () => {
      window.alert("You clicked an action")
    },
  },
  description: "Toast Description",
  label: "Toast Label",
})

import type {ReactElement} from "react"

import type {QdsNotificationEmphasis} from "@qualcomm-ui/qds-core/inline-notification"
import {Button} from "@qualcomm-ui/react/button"
import {createToaster, Toaster} from "@qualcomm-ui/react/toast"

const toaster = createToaster({
  placement: "bottom-end",
})

const types: QdsNotificationEmphasis[] = [
  "info",
  "success",
  "warning",
  "danger",
  "neutral",
  "loading",
]

export function ToastEmphasisDemo(): ReactElement {
  return (
    <>
      <div className="flex flex-wrap gap-4">
        {types.map((emphasis) => (
          <Button
            key={emphasis}
            onClick={() =>
              toaster.create({
                label: `The status is ${emphasis}`,
                type: emphasis,
              })
            }
            variant="outline"
          >
            {emphasis}
          </Button>
        ))}
      </div>
      <Toaster toaster={toaster} />
    </>
  )
}

const toaster = createToaster({
overlap: true,
placement: "bottom-end",
})

toaster.create({
  duration: 10000,
  label: "Task failed successfully",
  type: "success",
})

toaster.create({
  label: "Persistent Toast",
  type: "loading",
})

import {type ReactElement, useState} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {createToaster, Toaster} from "@qualcomm-ui/react/toast"

const toaster = createToaster({
  placement: "bottom-end",
})

export function ToastPauseDemo(): ReactElement {
  const [paused, setPaused] = useState(false)
  const [shown, setShown] = useState(false)

  const show = () => {
    toaster.create({
      label: "This is a success toast",
      onStatusChange: (details) => {
        if (details.status === "visible") {
          setShown(true)
        } else if (details.status === "dismissing") {
          setShown(false)
        }
      },
      type: "success",
    })
  }

  const pause = () => {
    toaster.pause()
    setPaused(true)
  }

  const play = () => {
    toaster.resume()
    setPaused(false)
  }

  return (
    <>
      <Toaster toaster={toaster} />

      <div className="flex gap-4">
        <Button disabled={shown} onClick={show} variant="outline">
          Show Toast
        </Button>
        <Button disabled={!shown || paused} onClick={pause} variant="outline">
          Pause Toast
        </Button>
        <Button disabled={!shown || !paused} onClick={play} variant="outline">
          Play Toast
        </Button>
      </div>
    </>
  )
}

const toaster = createToaster({
max: 3,
placement: "bottom-end",
})

const topToaster = createToaster({
placement: "top-end",
})

const bottomToaster = createToaster({
placement: "bottom-start",
})