<script context="module" lang="ts">
    export type Page = {
        name: string,
        target: string,
    };
</script>

<script lang="ts">
    export let pages: Array<Page>;

    $: activeTarget = 0;
</script>

<!-- This example requires Tailwind CSS v2.0+ -->
<nav class="bg-gray-800">
  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
    <div class="relative flex h-16 items-center justify-between">
      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
        <div class="hidden sm:ml-6 sm:block">
          <div class="flex space-x-4">
              {#each pages as page, i}
                  <a href={page.target} on:click={() => activeTarget = i} class="{i === activeTarget ? 'bg-gray-900 text-slate-400 px-3 py-2 rounded-md text-sm font-medium' : 'text-slate-400 hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium'}" aria-current="page">{page.name}</a>
              {/each}
          </div>
        </div>
      </div>
    </div>

    <slot />
  </div>
</nav>

