Toast

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Default() {
  const toaster = createToaster({});

  return (
    <>
      <button
        className="btn preset-filled"
        onClick={() =>
          toaster.info({
            title: 'Title',
            description: 'This is a description.',
          })
        }
      >
        Toast
      </button>
      <Toast.Group toaster={toaster}>
        {(toast) => (
          <Toast toast={toast} key={toast.id}>
            <Toast.Message>
              <Toast.Title>{toast.title}</Toast.Title>
              <Toast.Description>{toast.description}</Toast.Description>
            </Toast.Message>
            <Toast.CloseTrigger />
          </Toast>
        )}
      </Toast.Group>
    </>
  );
}

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Type() {
  const toaster = createToaster({});

  return (
    <>
      <div className="grid grid-cols-2 gap-2">
        <button
          className="btn preset-filled"
          onClick={() =>
            toaster.info({
              title: 'Info',
              description: 'This is an info toast.',
            })
          }
        >
          Info
        </button>
        <button
          className="btn preset-filled-success-500"
          onClick={() =>
            toaster.success({
              title: 'Success',
              description: 'This is a success toast.',
            })
          }
        >
          Success
        </button>
        <button
          className="btn preset-filled-warning-500"
          onClick={() =>
            toaster.warning({
              title: 'Warning',
              description: 'This is a warning toast.',
            })
          }
        >
          Warning
        </button>
        <button
          className="btn preset-filled-error-500"
          onClick={() =>
            toaster.error({
              title: 'Error',
              description: 'This is an error toast.',
            })
          }
        >
          Error
        </button>
      </div>
      <Toast.Group toaster={toaster}>
        {(toast) => (
          <Toast toast={toast} key={toast.id}>
            <Toast.Message>
              <Toast.Title>{toast.title}</Toast.Title>
              <Toast.Description>{toast.description}</Toast.Description>
            </Toast.Message>
            <Toast.CloseTrigger />
          </Toast>
        )}
      </Toast.Group>
    </>
  );
}

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Action() {
  const toaster = createToaster({});

  return (
    <>
      <button
        className="btn preset-filled"
        onClick={() =>
          toaster.info({
            title: 'Toast',
            description: 'This is a toast message.',
            duration: Infinity,
            action: {
              label: 'Undo',
              onClick: () => {
                toaster.success({
                  title: 'Task undone',
                  description: 'The task has been undone.',
                });
              },
            },
          })
        }
      >
        Toast
      </button>

      <Toast.Group toaster={toaster}>
        {(toast) => (
          <Toast toast={toast} key={toast.id}>
            <Toast.Message>
              <Toast.Title>{toast.title}</Toast.Title>
              <Toast.Description>{toast.description}</Toast.Description>
            </Toast.Message>
            {toast.action && <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>}
            <Toast.CloseTrigger />
          </Toast>
        )}
      </Toast.Group>
    </>
  );
}

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Closable() {
  const toaster = createToaster({});

  return (
    <>
      <button
        className="btn preset-filled"
        onClick={() =>
          toaster.info({
            title: 'Title',
            description: 'This is a description.',
            closable: false,
          })
        }
      >
        Toast
      </button>
      <Toast.Group toaster={toaster}>
        {(toast) => (
          <Toast toast={toast} key={toast.id}>
            <Toast.Message>
              <Toast.Title>{toast.title}</Toast.Title>
              <Toast.Description>{toast.description}</Toast.Description>
            </Toast.Message>
            {toast.closable && <Toast.CloseTrigger />}
          </Toast>
        )}
      </Toast.Group>
    </>
  );
}

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Placement() {
  const toaster = createToaster({
    placement: 'bottom-end',
  });

  return (
    <>
      <button
        className="btn preset-filled"
        onClick={() =>
          toaster.info({
            title: 'Title',
            description: 'This is a description.',
          })
        }
      >
        Toast
      </button>
      <Toast.Group toaster={toaster}>
        {(toast) => (
          <Toast toast={toast} key={toast.id}>
            <Toast.Message>
              <Toast.Title>{toast.title}</Toast.Title>
              <Toast.Description>{toast.description}</Toast.Description>
            </Toast.Message>
            <Toast.CloseTrigger />
          </Toast>
        )}
      </Toast.Group>
    </>
  );
}

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
import { SkullIcon } from 'lucide-react';

export default function Meta() {
  const toaster = createToaster({});

  return (
    <>
      <button
        className="btn preset-filled"
        onClick={() =>
          toaster.info({
            title: 'Title',
            description: 'This is a description.',
            meta: {
              icon: <SkullIcon className="size-8" />,
            },
          })
        }
      >
        Toast
      </button>
      <Toast.Group toaster={toaster}>
        {(toast) => (
          <Toast toast={toast} key={toast.id}>
            {toast.meta!.icon}
            <Toast.Message>
              <Toast.Title className="flex gap-2 items-center">{toast.title}</Toast.Title>
              <Toast.Description>{toast.description}</Toast.Description>
            </Toast.Message>
            <Toast.CloseTrigger />
          </Toast>
        )}
      </Toast.Group>
    </>
  );
}

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Promise_() {
  const toaster = createToaster({});

  function generatePositiveNumber() {
    return new Promise<number>((resolve, reject) => {
      setTimeout(() => {
        const number = Math.random() - 0.5;
        if (number > 0) {
          resolve(number);
        } else {
          reject(number);
        }
      }, 2000);
    });
  }

  return (
    <>
      <button
        className="btn preset-filled"
        onClick={() =>
          toaster.promise(generatePositiveNumber(), {
            loading: {
              title: 'Loading...',
              description: 'Please wait while generating your number',
            },
            success: (number) => ({
              title: 'Success',
              description: `Your number is ${number.toFixed(2)}`,
            }),
            error: (number) => ({
              title: 'Error',
              description: `Your number is ${(number as number).toFixed(2)}`,
            }),
          })
        }
      >
        Toast
      </button>

      <Toast.Group toaster={toaster}>
        {(toast) => (
          <Toast toast={toast} key={toast.id}>
            <Toast.Message>
              <Toast.Title>{toast.title}</Toast.Title>
              <Toast.Description>{toast.description}</Toast.Description>
            </Toast.Message>
            <Toast.CloseTrigger />
          </Toast>
        )}
      </Toast.Group>
    </>
  );
}