lucent-laravel/front/js/svelte/records/ContentTabs.svelte

<script>
    export let schema;
    export let active = "";

    let tabs = schema.groups?.map((group) => {
        return {label: group, name: group}
    }) ?? [];
    let mainTab = {
        label: "Main",
        name: "",
    };

    tabs = [mainTab, ...tabs];

    function changeTab(e, tabName) {
        e.preventDefault();
        active = tabName;
    }
</script>

{#if tabs.length > 1}
    <ul class="nav nav-pills mb-4 justify-content-center">
        {#each tabs as tab}
            <li class="nav-item">
                <button
                        on:click={(e) => changeTab(e, tab.name)}
                        class="nav-link"
                        class:active={active === tab.name}
                        aria-current="page"
                >
                    {tab.label}
                </button>
            </li>
        {/each}
    </ul>
{/if}