src/lib/components/Tabs.svelte

<script lang="ts" module>
	import type { Snippet } from 'svelte';

	export type TabOption = {
		value: string;
		label: string | (() => string);
		content: Snippet;
	};

	export type TabsProps = {
		value?: string;
		tabs: TabOption[];
		rootClass?: string;
		listClass?: string;
		triggerClass?: string;
		contentWrapperClass?: string;
		contentClass?: string;
	};
</script>

<script lang="ts">
	import * as Tabs from '$lib/components/ui/tabs';

	let {
		value = $bindable(),
		tabs,
		rootClass = 'gap-0',
		listClass = 'mx-4 mt-3 flex-wrap justify-start sm:mx-5',
		triggerClass = 'flex-none text-xs font-semibold data-active:text-foreground',
		contentWrapperClass = 'p-4 sm:p-5',
		contentClass
	}: TabsProps = $props();

	function tabLabel(label: TabOption['label']) {
		return typeof label === 'function' ? label() : label;
	}
</script>

<Tabs.Root bind:value class={rootClass}>
	<Tabs.List class={listClass}>
		{#each tabs as tab (tab.value)}
			<Tabs.Trigger value={tab.value} class={triggerClass}>
				{tabLabel(tab.label)}
			</Tabs.Trigger>
		{/each}
	</Tabs.List>

	<div class={contentWrapperClass}>
		{#each tabs as tab (tab.value)}
			<Tabs.Content value={tab.value} class={contentClass}>
				{@render tab.content()}
			</Tabs.Content>
		{/each}
	</div>
</Tabs.Root>