toeasy-front/src/lib/components/containers/Tabs.svelte

<script>
    import { createEventDispatcher } from 'svelte';
    
    export let tabs = [];
    export let active = 0;
    export let showCloseIcon = false;
    
    const dispatch = createEventDispatcher();
  
    function selectTab(index) {
      active = index;
      const event = new CustomEvent("change", { detail: index });
      dispatch('change', { detail: index });
    }
    
    function handleClose() {
      dispatch('close');
    }
  </script>
  
  <div class="flex border-b border-gray-200 justify-between items-center">
    <div class="flex">
      {#each tabs as tab, i}
        <button
          class={`px-4 py-2 -mb-px border-b-2 ${
            i === active
              ? "border-blue-600 text-blue-600 font-medium"
              : "border-transparent text-gray-500 hover:text-gray-700"
          }`}
          on:click={() => selectTab(i)}
        >
          {tab}
        </button>
      {/each}
    </div>
    
    {#if showCloseIcon}
      <button
        class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors"
        on:click={handleClose}
        title="Cancelar criação"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    {/if}
  </div>