<section class="demo-section">
  <h2>Empty State</h2>

  <div class="demo-row">
    <div id="vue-empty-state-app" class="vue-mount"></div>
  </div>

  <script type="module">
    import { createApp } from "vue";
    import { GnEmptyState, GnButton } from "/vue/index.js";

    createApp({
      components: { GnEmptyState, GnButton },
      template: document.getElementById("vue-empty-state-template").innerHTML
    }).mount("#vue-empty-state-app");
  </script>

  <script type="text/template" id="vue-empty-state-template">
    <gn-empty-state
      icon="ph-warning-circle"
      title="No projects yet"
      text="Get started by creating a new project for your team."
      variant="warning"
    >
      <template #actions>
        <gn-button variant="primary">Create project</gn-button>
      </template>
    </gn-empty-state>
  </script>
</section>