Success, error, an action and a promise

// apps/docs/examples/ui/toast.tsx'use client';
import {Button} from '@workspace/active-ui/components/primitives/button';import {toast, Toaster} from '@workspace/active-ui/components/primitives/toast';
// Simulated work: settles after a second and a half, without a server.const sendStatements = () =>  new Promise<number>((resolve) => window.setTimeout(() => resolve(214), 1500));
/** * Short messages about what just happened, in a corner of the screen. Each * type keeps the message visible as long as its task needs; a message that * asks for an action stays until it is closed. `toast.promise` shows a * loading message and replaces it with the outcome (simulated here). */export default function ToastExample() {  return (    <Toaster regionLabel="Notifications" closeLabel="Dismiss">      <div className="flex flex-wrap justify-center gap-2">        <Button          variant="outline"          onClick={() => toast.add({type: 'success', title: 'Scheme saved'})}        >          Success        </Button>        <Button          variant="outline"          onClick={() =>            toast.add({              type: 'error',              title: 'The export failed',              description:                'The file was larger than 25 MB. Choose a shorter period.',            })          }        >          Error        </Button>        <Button          variant="outline"          onClick={() => {            const id = toast.add({              type: 'warning',              title: 'Three participants need a review',              description: 'Their date of birth is missing.',              timeout: 0,              actionProps: {                children: 'Mark as reviewed',                onClick: () => toast.close(id),              },            });          }}        >          Action required        </Button>        <Button          variant="outline"          onClick={() =>            toast.promise(sendStatements(), {              loading: {title: 'Sending statements…'},              success: (count) => ({title: `${count} statements sent`}),              error: {title: 'The statements were not sent'},            })          }        >          With progress        </Button>      </div>    </Toaster>  );}