Tabs

npm i svelte-motion clsx tailwind-merge

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
        
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

<script lang="ts">
	import { cn } from '@/utils';
	import { AnimatePresence, Motion } from 'svelte-motion';
	import FadeInDiv from './FadeInDiv.svelte';

	type Tab = {
		title: string;
		value: string;
		content?: string | any;
	};

	export let propTabs: Tab[];
	export let containerClassName: string | undefined = undefined;
	export let activeTabClassName: string | undefined = undefined;
	export let tabClassName: string | undefined = undefined;
	export let contentClassName: string | undefined = undefined;

	let active: Tab = propTabs[0];
	let tabs: Tab[] = propTabs;

	const moveSelectedTabToTop = (idx: number) => {
		const newTabs = [...propTabs];
		const selectedTab = newTabs.splice(idx, 1);
		newTabs.unshift(selectedTab[0]);
		tabs = newTabs;
		active = newTabs[0];
	};

	let hovering = false;
</script>

<div
	class={cn(
		'no-visible-scrollbar relative flex w-full max-w-full flex-row items-center justify-start overflow-auto [perspective:1000px] sm:overflow-visible',
		containerClassName
	)}
>
	{#each propTabs as tab, idx (tab.title)}
		<button
			on:click={() => {
				moveSelectedTabToTop(idx);
			}}
			on:mouseenter={() => (hovering = true)}
			on:mouseleave={() => (hovering = false)}
			class={cn('relative rounded-full px-4 py-2', tabClassName)}
			style="transform-style: preserve-3d;"
		>
			{#if active.value === tab.value}
				<Motion
					let:motion
					layoutId="clickedbutton"
					transition={{ type: 'spring', bounce: 0.3, duration: 0.6 }}
				>
					<div
						use:motion
						class={cn(
							'absolute inset-0 rounded-full bg-gray-200 dark:bg-zinc-800 ',
							activeTabClassName
						)}
					/>
				</Motion>
			{/if}

			<span class="relative block text-black dark:text-white">
				{tab.title}
			</span>
		</button>
	{/each}
</div>
<FadeInDiv {tabs} {hovering} className={cn('', contentClassName)} />

<script lang="ts">
	import { cn } from '@/utils';
	import { Motion } from 'svelte-motion';

	type Tab = {
		title: string;
		value: string;
		content?: any | undefined;
	};

	export let className: string | undefined = undefined;
	export let tabs: Tab[];
	export let hovering: boolean | undefined;

	const isActive = (tab: Tab) => {
		return tab.value === tabs[0].value;
	};
</script>

<div class="relative h-full w-full">
	{#each tabs as tab, idx (tab.value)}
		<Motion
			let:motion
			layoutId={tab.value}
			animate={{
				y: isActive(tab) ? [0, 40, 0] : 0
			}}
		>
			<div
				use:motion
				style={`scale: ${1 - idx * 0.1}; top: ${hovering ? `${idx * -60}px` : 0}; z-index: ${-idx}; opacity: ${idx < 3 ? 1 - idx * 0.1 : 0};`}
				class={cn('absolute left-0 top-0 h-full w-full overflow-hidden', className)}
			>
				{@html tab.content}
			</div>
		</Motion>
	{/each}
</div>

.no-visible-scrollbar {
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.no-visible-scrollbar::-webkit-scrollbar {
	display: none;
}

import Tabs from './Tabs.svelte';
import FadeInDiv from './FadeInDiv.svelte';

export { Tabs, FadeInDiv };