Toast

'use client'

import { Button, toast } from '@saas-ui/react'

export const ToasterBasic = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toast.create({
          description: 'File saved successfully',
          type: 'info',
        })
      }
    >
      Show Toast
    </Button>
  )
}

'use client'

import { Button } from '@saas-ui/react'
import { toast } from '@saas-ui/react'

export const ToasterPersistent = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toast.create({
          description: 'File saved successfully',
          type: 'loading',
        })
      }
    >
      Show Toast
    </Button>
  )
}

'use client'

import { Button, For, HStack } from '@saas-ui/react'
import { toast } from '@saas-ui/react'

export const ToasterWithStatus = () => {
  return (
    <HStack>
      <For each={['success', 'error', 'warning', 'info']}>
        {(type) => (
          <Button
            size="sm"
            variant="outline"
            key={type}
            onClick={() =>
              toast.create({
                title: `Toast status is ${type}`,
                type: type,
              })
            }
          >
            {type}
          </Button>
        )}
      </For>
    </HStack>
  )
}

'use client'

import { Button } from '@saas-ui/react'
import { toast } from '@saas-ui/react'

export const ToasterWithAction = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toast.success({
          title: 'Update successful',
          description: 'File saved successfully to the server',
          action: {
            label: 'Undo',
            onClick: () => console.log('Undo'),
          },
        })
      }
    >
      Click me
    </Button>
  )
}

'use client'

import { Button } from '@saas-ui/react'
import { toast } from '@saas-ui/react'

export const ToasterWithPromise = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() => {
        const promise = new Promise<void>((resolve) => {
          setTimeout(() => resolve(), 5000)
        })

        toast.promise(promise, {
          success: {
            title: 'Successfully uploaded!',
            description: 'Looks great',
          },
          error: {
            title: 'Upload failed',
            description: 'Something wrong with the upload',
          },
          loading: { title: 'Uploading...', description: 'Please wait' },
        })
      }}
    >
      Show Toast
    </Button>
  )
}

'use client'

import { Button } from '@saas-ui/react'
import { toast } from '@saas-ui/react'

export const ToasterWithDuration = () => {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toast.create({
          description: 'File saved successfully',
          duration: 6000,
        })
      }
    >
      Show Toast
    </Button>
  )
}

'use client'

import { useId, useState } from 'react'

import { Button, HStack } from '@saas-ui/react'
import { toast } from '@saas-ui/react'
import { HiPause, HiPlay } from 'react-icons/hi'

export const ToasterPauseAndPlay = () => {
  const id = useId()
  const [paused, setPaused] = useState(false)
  const [shown, setShown] = useState(false)

  const show = () => {
    toast.success({
      id,
      title: 'This is a success toast',
      onStatusChange: (details) => {
        if (details.status === 'visible') {
          setShown(true)
        } else if (details.status === 'dismissing') {
          setShown(false)
        }
      },
    })
  }

  const pause = () => {
    toast.pause(id)
    setPaused(true)
  }

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

  return (
    <HStack>
      <Button variant="outline" size="sm" onClick={show} disabled={shown}>
        Show Toast
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={pause}
        disabled={!shown || paused}
      >
        <HiPause />
        Pause Toast
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={play}
        disabled={!shown || !paused}
      >
        <HiPlay />
        Play Toast
      </Button>
    </HStack>
  )
}

'use client'

import { useState } from 'react'

import { HStack, Stack, Text } from '@saas-ui/react'
import { Button, toast } from '@saas-ui/react'

export const ToasterLifecycle = () => {
  const [statusLog, setStatusLog] = useState<[number, string][]>([])
  const [dismissed, setDismissed] = useState(true)

  return (
    <Stack align="flex-start">
      <Button
        disabled={!dismissed}
        variant="outline"
        size="sm"
        onClick={() =>
          toast.create({
            description: 'This is a toast',
            type: 'info',
            onStatusChange({ status }) {
              setDismissed(status === 'unmounted')
              setStatusLog((prev) => [[Date.now(), status], ...prev])
            },
          })
        }
      >
        Show Toast
      </Button>

      <Stack padding="2" width="full" role="log" borderWidth="1px" minH="100px">
        {statusLog.map(([time, toastStatus], i) => {
          const date = new Date(time)
          return (
            <HStack as="pre" fontFamily="mono" textStyle="sm" key={i}>
              {date.toLocaleTimeString()}{' '}
              <Text fontWeight="bold">{toastStatus}</Text>
            </HStack>
          )
        })}
      </Stack>
    </Stack>
  )
}