Notifications

'use client';

import { toaster } from '@cerberus/react'

function Feature() {
  const handleClick = useCallback(() => {
    toaster.create({
      type: 'info',
      title: 'Update Available',
      description: 'A new version of the app is available',
      action: {
        label: 'Refresh',
        onClick: () => {
          window.location.reload()
        }
      }
    })
  }, [])

  return <Button onClick={handleClick}>Trigger notification</Button>
}

import { NotificationCenter } from '@cerberus/react'

export function Layout(props: PropsWithChildren<{}>) {
  return (
    <>
      {props.children}
      <NotificationCenter />
    </>
  )
}

'use client';

import { toaster } from '@cerberus/react'

function Feature() {
  const handleClick = useCallback(() => {
    toaster.create({
      type: 'loading',
      title: 'Loading',
      description: 'It's taking longer than normal.',
    })
  }, [toaster.create])

  return <Button onClick={handleClick}>Trigger notification</Button>
}

'use client';

import { toaster } from '@cerberus/react'

function Feature() {
  const handleClick = useCallback(() => {
    toaster.create({
      type: 'info-subtle',
      title: 'Update Available',
      description: 'A new version of the app is available',
      action: {
        label: 'Refresh',
        onClick: () => {
          window.location.reload()
        }
      }
    })
  }, [])

  return <Button onClick={handleClick}>Trigger subtle notification</Button>
}

'use client';

import { createToaster, NotificationCenter, Button } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function CustomConfigDemo() {
  const customToaster = createToaster({
    gap: 24,
    overlap: false,
    placement: 'bottom-end',
  })

  return (
    <>
      <HStack>
        <Button
          onClick={() => {
            customToaster.create({
              title: 'Custom Toaster',
              description:
                'This notification is using a custom toaster configuration.',
              type: 'success',
            })
          }}
        >
          Show Notification
        </Button>
      </HStack>

      <NotificationCenter toaster={customToaster} />
    </>
  )
}

import { IconButton, formatNotifyCount } from '@cerberus/react'
import { Notifications } from '@cerberus/icons'

export function NotifyBadgePreview() {
  return (
    <IconButton
      ariaLabel="View notifications"
      data-notify
      data-notify-count={formatNotifyCount(100)}
    >
    <Notifications />
  </IconButton>
  )
}