pixelperfectionist/client/components/Tabs.svelte

<script>
  import Icon from '$/client/components/Icon.svelte';
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  export let icon_size = "36px";
  export let panels = [];
  export let selected;
  export let vertical = false;
  console.log("panels", panels);

  const activate = (index) => {
    panels = panels.map((x, i) => {
      x.active = i == index;
      if(x.active) selected = x;
      return x;
    });

    dispatch("select", {index, selected});
  }
</script>

<style>
  content {
    display: flex;
    flex-direction: column;
  }
</style>

<content>
  {#if vertical}
    <tabs class="vertical">
    {#each panels as panel, i}
      <a class:active={ panel.active} on:click={ () => activate(i) }>
        {#if panel.icon}<Icon name={ panel.icon } size={ icon_size } />{/if}
          {panel.title}
      </a>
      <component>
        {#if panel.active}
          <svelte:component this={panel.component}  {...panel.props}/>
        {/if}
      </component>
    {/each}
    </tabs>
  {:else}
    <tabs>
    {#each panels as panel, i}
      <a class:active={ panel.active} on:click={ () => activate(i) }>
        {#if panel.icon}<Icon name={ panel.icon } size={ icon_size } />{/if}
          {panel.title}
      </a>
    {/each}
    </tabs>
    <component>
    {#each panels as panel}
      {#if panel.active}
        <svelte:component this={selected.component} {...selected.props} />
      {/if}
    {/each}
    </component>
  {/if}
</content>