28 lines
707 B
Svelte
28 lines
707 B
Svelte
|
<script>
|
||
|
|
export let tabs = [];
|
||
|
|
export let currentTab;
|
||
|
|
export let onChange;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="w-full flex justify-center">
|
||
|
|
<div class="flex items-center">
|
||
|
|
{#each tabs as tab}
|
||
|
|
<button
|
||
|
|
class="relative border-r-1 border-t-0 border-b-0 border-l-0 rounded-none {currentTab ===
|
||
|
|
tab.value
|
||
|
|
? 'text-black font-bold bg-gray-100'
|
||
|
|
: 'bg-gray-200 text-gray'} focus:outline-none w-40 text-left p-3"
|
||
|
|
on:click={onChange(tab.value)}
|
||
|
|
>
|
||
|
|
{tab.label}
|
||
|
|
|
||
|
|
{#if currentTab === tab.value}
|
||
|
|
<span class="absolute w-full top-0 left-0 h-1 bg-blue-500" />
|
||
|
|
{/if}
|
||
|
|
</button>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<slot name="content" />
|
||
|
|
</div>
|