Toast

<script lang="ts">
  import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster({});
</script>

<button
  class="btn preset-filled"
  onclick={() =>
    toaster.info({
      title: 'Title',
      description: 'This is a description.',
    })}
>
  Toast
</button>

<Toast.Group {toaster}>
  {#snippet children(toast)}
    <Toast {toast}>
      <Toast.Message>
        <Toast.Title>{toast.title}</Toast.Title>
        <Toast.Description>{toast.description}</Toast.Description>
      </Toast.Message>
      <Toast.CloseTrigger />
    </Toast>
  {/snippet}
</Toast.Group>

<script lang="ts">
  import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster({});
</script>

<div class="grid grid-cols-2 gap-2">
  <button
    class="btn preset-filled"
    onclick={() =>
      toaster.info({
        title: 'Info',
        description: 'This is an info toast.',
      })}
  >
    Info
  </button>
  <button
    class="btn preset-filled-success-500"
    onclick={() =>
      toaster.success({
        title: 'Success',
        description: 'This is a success toast.',
      })}
  >
    Success
  </button>
  <button
    class="btn preset-filled-warning-500"
    onclick={() =>
      toaster.warning({
        title: 'Warning',
        description: 'This is a warning toast.',
      })}
  >
    Warning
  </button>
  <button
    class="btn preset-filled-error-500"
    onclick={() =>
      toaster.error({
        title: 'Error',
        description: 'This is an error toast.',
      })}
  >
    Error
  </button>
</div>

<Toast.Group {toaster}>
  {#snippet children(toast)}
    <Toast {toast}>
      <Toast.Message>
        <Toast.Title>{toast.title}</Toast.Title>
        <Toast.Description>{toast.description}</Toast.Description>
      </Toast.Message>
      <Toast.CloseTrigger />
    </Toast>
  {/snippet}
</Toast.Group>

<script lang="ts">
  import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster({});
</script>

<button
  class="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}>
  {#snippet children(toast)}
    <Toast {toast}>
      <Toast.Message>
        <Toast.Title>{toast.title}</Toast.Title>
        <Toast.Description>{toast.description}</Toast.Description>
      </Toast.Message>
      {#if toast.action}
        <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
      {/if}
      <Toast.CloseTrigger />
    </Toast>
  {/snippet}
</Toast.Group>

<script lang="ts">
  import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster({});
</script>

<button
  class="btn preset-filled"
  onclick={() =>
    toaster.info({
      title: 'Title',
      description: 'This is a description.',
      closable: false,
    })}
>
  Toast
</button>

<Toast.Group {toaster}>
  {#snippet children(toast)}
    <Toast {toast}>
      <Toast.Message>
        <Toast.Title>{toast.title}</Toast.Title>
        <Toast.Description>{toast.description}</Toast.Description>
      </Toast.Message>
      {#if toast.closable}
        <Toast.CloseTrigger />
      {/if}
    </Toast>
  {/snippet}
</Toast.Group>

<script lang="ts">
  import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster({
    placement: 'bottom-end',
  });
</script>

<button
  class="btn preset-filled"
  onclick={() =>
    toaster.info({
      title: 'Title',
      description: 'This is a description.',
    })}
>
  Toast
</button>

<Toast.Group {toaster}>
  {#snippet children(toast)}
    <Toast {toast}>
      <Toast.Message>
        <Toast.Title>{toast.title}</Toast.Title>
        <Toast.Description>{toast.description}</Toast.Description>
      </Toast.Message>
      <Toast.CloseTrigger />
    </Toast>
  {/snippet}
</Toast.Group>

<script lang="ts">
  import { SkullIcon } from '@lucide/svelte';
  import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

  const toaster = createToaster({});
</script>

{#snippet skull()}
  <SkullIcon class="size-8" />
{/snippet}

<button
  class="btn preset-filled"
  onclick={() =>
    toaster.info({
      title: 'Title',
      description: 'This is a description.',
      meta: {
        icon: skull,
      },
    })}
>
  Toast
</button>

<Toast.Group {toaster}>
  {#snippet children(toast)}
    <Toast {toast}>
      {@render toast.meta!.icon()}
      <Toast.Message>
        <Toast.Title class="flex gap-2 items-center">{toast.title}</Toast.Title>
        <Toast.Description>{toast.description} {toast.meta?.foo}</Toast.Description>
      </Toast.Message>
      <Toast.CloseTrigger />
    </Toast>
  {/snippet}
</Toast.Group>

<script lang="ts">
  import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

  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);
    });
  }
</script>

<button
  class="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}`,
      }),
      error: (number) => ({
        title: 'Error',
        description: `Your number is ${number}`,
      }),
    })}
>
  Toast
</button>

<Toast.Group {toaster}>
  {#snippet children(toast)}
    <Toast {toast}>
      <Toast.Message>
        <Toast.Title>{toast.title}</Toast.Title>
        <Toast.Description>{toast.description}</Toast.Description>
      </Toast.Message>
      <Toast.CloseTrigger />
    </Toast>
  {/snippet}
</Toast.Group>