Source code

src/showcase/pages/components/empty-states.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the empty & error states component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentEmptyStates"}'
  ></include>
  <div class="catalog-grid">
    <article class="card full">
      <header class="card-header"><h2 x-text="$t('galleryEmpty')"></h2></header>
      <div class="card-body">
        <div class="row g-4">
          <div class="col-md-6">
            <div class="empty-state p-3">
              <span x-icon="'box'"></span>
              <h3 class="h5" x-text="$t('noResults')"></h3>
              <p x-text="$t('galleryPanelReuseBody')"></p>
              <a class="btn btn-secondary" href="/resources" x-link x-text="$t('resources')"></a>
            </div>
          </div>
          <div class="col-md-6">
            <div class="alert" :class="recovered ? 'alert-success' : 'alert-danger'">
              <p role="status" x-text="$t(recovered ? 'galleryRecovered' : 'surfaceError')"></p>
              <button
                class="btn btn-secondary btn-sm"
                @click="recovered = !recovered"
                x-text="$t(recovered ? 'reset' : 'retry')"
              ></button>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>