basecoat/docs/_includes/components/toast.njk

{% macro toaster(
  id="toaster",
  toasts=[],
  main_attrs=None,
  is_fragment=false,
  include_html=true,
  include_script=false,
  register_on=["alpine:init"]
) %}
{% if not is_fragment and include_script %}
  {% include "components/toast-script.njk" %}
{% endif %}

{% if include_html %}
{% set iconMapping = {
  'error': 'circle-x',
  'success': 'circle-check',
  'info': 'info',
  'warning': 'circle-alert'
} %}

<div
  id="{{ id }}"
  class="toaster"
  {% for key, value in main_attrs %}
    {{ key }}="{{ value }}"
  {% endfor %}
  {% if is_fragment %}hx-swap-oob="beforeend"{% endif %}
>
{% for toast in toasts %}
  <div
    class="toast"
    role="{{ 'alert' if toast.category == 'error' else 'status' }}"
    aria-atomic="true"
    aria-hidden="false"
    :aria-hidden="!open"
    {% if toast.category %}data-category="{{ toast.category }}"{% endif %}
    x-data="toast('{{ toast.category }}', {{ toast.timeoutDuration }})"
    x-bind="$toast"
  >
    <div class="toast-content">
      <div class="flex items-center justify-between gap-x-3 p-4">
        {% if toast.category in ["error", "success", "info", "warning"] %}
          {% lucide iconMapping[toast.category], class="size-4 shrink-0" %}
        {% endif %}
        <section class="flex-1 flex flex-col gap-0.5 items-start">
          {% if toast.message is string %}
            <h2 class="font-medium">{{ toast.message }}</h2>
          {% elif toast.message is mapping %}
            {% if toast.message.title %}
              <h2 class="font-medium">{{ toast.message.title }}</h2>
            {% endif %}
            {% if toast.message.description %}
              <p class="text-muted-foreground">{{ toast.message.description }}</p>
            {% endif %}
          {% endif %}
        </section>
        {% if toast.message.action or toast.message.cancel %}
          <footer class="flex flex-col gap-1 self-start">
            {% if toast.message.action %}
              {% if toast.message.action.click %}
                <button
                  type="button"
                  class="btn h-6 text-xs px-2.5 rounded-sm"
                  @click="{{ toast.message.action.click }}"
                >{{ toast.message.action.label }}</button>
              {% elif toast.message.action.url %}
                <a
                  href="{{ toast.message.action.url }}"
                  class="btn h-6 text-xs px-2.5 rounded-sm"
                >{{ toast.message.action.label }}</a>
              {% endif %}
            {% endif %}
            {% if toast.message.cancel %}
              {% if toast.message.cancel.click %}
                <button
                  type="button"
                  class="btn-outline h-6 text-xs px-2.5 rounded-sm"
                  @click="{{ toast.message.cancel.click }}"
                >{{ toast.message.cancel.label }}</button>
              {% elif toast.message.cancel.url %}
                <a
                  href="{{ toast.message.cancel.url }}"
                  class="btn-outline h-6 text-xs px-2.5 rounded-sm"
                >{{ toast.message.cancel.label }}</a>
              {% endif %}
            {% endif %}
          </footer>
        {% endif %}
      </div>
    </div>
  </div>
{% endfor %}
</div>
{% endif %}
{% endmacro %}