Empty

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { Empty } from "kumo-svelte/components/empty";
  import CodeIcon from "phosphor-svelte/lib/CodeIcon";
  import GlobeIcon from "phosphor-svelte/lib/GlobeIcon";
  import PackageIcon from "phosphor-svelte/lib/PackageIcon";
</script>

<Empty
  title="No packages found"
  description="Get started by installing your first package."
  command="npm install kumo-svelte"
>
  {#snippet icon()}
    <PackageIcon size={48} />
  {/snippet}

  <div class="flex items-center gap-2">
    <Button icon={CodeIcon}>See examples</Button>
    <Button icon={GlobeIcon} variant="primary">View documentation</Button>
  </div>
</Empty>

<script lang="ts">
  import { Empty } from "kumo-svelte/components/empty";
</script>

<Empty
  title="No results found"
  description="Try adjusting your search or filter to find what you're looking for."
/>

<script lang="ts">
  import { Empty } from "kumo-svelte/components/empty";
  import DatabaseIcon from "phosphor-svelte/lib/DatabaseIcon";
</script>

<div class="flex flex-col gap-8">
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Small</p>
    <Empty size="sm" title="No data available" description="There is no data to display.">
      {#snippet icon()}
        <DatabaseIcon size={32} class="text-kumo-inactive" />
      {/snippet}
    </Empty>
  </div>
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Base</p>
    <Empty size="base" title="No data available" description="There is no data to display.">
      {#snippet icon()}
        <DatabaseIcon size={48} class="text-kumo-inactive" />
      {/snippet}
    </Empty>
  </div>
  <div>
    <p class="mb-2 text-sm text-kumo-subtle">Large</p>
    <Empty size="lg" title="No data available" description="There is no data to display.">
      {#snippet icon()}
        <DatabaseIcon size={64} class="text-kumo-inactive" />
      {/snippet}
    </Empty>
  </div>
</div>

<script lang="ts">
  import { Empty } from "kumo-svelte/components/empty";
  import FolderOpenIcon from "phosphor-svelte/lib/FolderOpenIcon";
</script>

<Empty
  title="No projects found"
  description="Get started by creating your first project using the command below."
  command="npm create kumo-project"
>
  {#snippet icon()}
    <FolderOpenIcon size={48} class="text-kumo-inactive" />
  {/snippet}
</Empty>

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { Empty } from "kumo-svelte/components/empty";
  import CloudSlashIcon from "phosphor-svelte/lib/CloudSlashIcon";
</script>

<Empty
  title="No connection"
  description="Unable to connect to the server. Please check your connection and try again."
>
  {#snippet icon()}
    <CloudSlashIcon size={48} class="text-kumo-inactive" />
  {/snippet}

  <div class="flex gap-2">
    <Button variant="primary">Retry</Button>
    <Button variant="secondary">Go Back</Button>
  </div>
</Empty>

<script lang="ts">
  import { Empty } from "kumo-svelte/components/empty";
</script>

<Empty title="Nothing here" />