<script lang="ts">
  import { Code, Globe, Package } from 'phosphor-svelte';
  import { Button, Empty } from 'kumo-svelte';
</script>

<Empty
  title="No packages found"
  description="Get started by installing your first package."
  commandLine="npm install kumo-svelte"
>
  {#snippet icon()}<Package class="size-12" />{/snippet}
  <div class="flex items-center gap-2">
    <Button icon={Code}>See examples</Button>
    <Button icon={Globe} variant="primary">View documentation</Button>
  </div>
</Empty>

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

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

<script lang="ts">
  import { Database } from 'phosphor-svelte';
  import { Empty } from 'kumo-svelte';
</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()}<Database class="size-8 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()}<Database class="size-12 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()}<Database class="size-16 text-kumo-inactive" />{/snippet}
    </Empty>
  </div>
</div>

<script lang="ts">
  import { FolderOpen } from 'phosphor-svelte';
  import { Empty } from 'kumo-svelte';
</script>

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

<script lang="ts">
  import { CloudSlash } from 'phosphor-svelte';
  import { Button, Empty } from 'kumo-svelte';
</script>

<Empty
  title="No connection"
  description="Unable to connect to the server. Please check your connection and try again."
>
  {#snippet icon()}<CloudSlash class="size-12 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';
</script>

<Empty title="Nothing here" />