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

<script>

    export let schema;
    export let isCreateMode;
    export let active = "";

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

    function showGraph(e) {
        e.preventDefault();
        active = "_graph";
    }

    function changeTab(e, tabName) {
        e.preventDefault();
        if (tabName == "_graph") {
            showGraph(e);
        } else {
            active = tabName;
        }
    }
</script>

{#if tabs.length > 1}
    <ul class="tabs">
        {#each tabs as tab}
            <li class="tab">
                <button
                        on:click={(e) => changeTab(e, tab.name)}
                        class="button"
                        class:active={active === tab.name}
                        aria-current="page"
                >
                    {tab.label}
                </button>
            </li>
        {/each}
    </ul>
{/if}