Macgeargear/sucu 68 component tab

src/lib/components/Playground.svelte

@@ -4,6 +4,10 @@
 	import TabCapsuleItem from './TabCapsule.svelte';
 	import Modal from '$lib/components/Modal/Modal.svelte';
 	import { modalShow } from './Modal/store';
+	import TabsRoot from './Tabs/TabsRoot.svelte';
+	import TabsList from './Tabs/TabsList.svelte';
+	import TabsTrigger from './Tabs/TabsTrigger.svelte';
+	import TabsContent from './Tabs/TabsContent.svelte';
 
 	modalShow.set(false);
 
@@ -158,6 +162,26 @@
 			<Modal />
 		{/if}
 	</section>
+
+	<section class="section">
+		<TabsRoot defaultActiveTab="all">
+			<TabsList>
+				<TabsTrigger value="all">ทั้งหมด</TabsTrigger>
+				<TabsTrigger value="sgcu">อบจ.</TabsTrigger>
+				<TabsTrigger value="sccu">สภานิสิต</TabsTrigger>
+			</TabsList>
+
+			<TabsContent value="all">
+				<p>This is the all tab content.</p>
+			</TabsContent>
+			<TabsContent value="sgcu">
+				<p>This is the sgcu tab content.</p>
+			</TabsContent>
+			<TabsContent value="sccu">
+				<p>This is the sccu tab content.</p>
+			</TabsContent>
+		</TabsRoot>
+	</section>
 </div>
 
 <style>

src/lib/components/Tabs/TabsContent.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { getTabsContext } from './tabsContext';
+
+	export let value: string;
+	export let className: string = '';
+	export { className as class };
+	const { activeTab } = getTabsContext();
+
+	$: isActive = $activeTab === value;
+</script>
+
+{#if isActive}
+	<div class={cn('p-4', className)}>
+		<slot />
+	</div>
+{/if}

src/lib/components/Tabs/TabsList.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	export let className: string = '';
+	export { className as class };
+</script>
+
+<div class={cn('border-b border-sucu-gray-light', className)}>
+	<nav class="-mb-2 sm:mb-0 flex space-x-8 text-sucu-pink-hover">
+		<slot />
+	</nav>
+</div>

src/lib/components/Tabs/TabsRoot.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { setTabsContext } from './tabsContext';
+
+	export let defaultActiveTab: string = '';
+	export let className: string = '';
+	export { className as class };
+
+	const tabs = setTabsContext();
+
+	if (defaultActiveTab) {
+		tabs.activeTab.set(defaultActiveTab);
+	}
+</script>
+
+<div class={className}>
+	<slot />
+</div>

src/lib/components/Tabs/TabsTrigger.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { getTabsContext } from './tabsContext';
+	import { cn } from '$lib/utils';
+	import { slide } from 'svelte/transition';
+
+	export let value: string;
+	export let className: string = '';
+	export { className as class };
+
+	const tabsContext = getTabsContext();
+	const { activeTab } = tabsContext;
+
+	onMount(() => {
+		tabsContext.registerTab({ value });
+	});
+
+	$: isActive = $activeTab === value;
+
+	function handleClick() {
+		tabsContext.selectTab(value);
+	}
+</script>
+
+<div class={cn('relative inline-block', className)}>
+	<button
+		class={cn(
+			'text-base mx-auto whitespace-nowrap py-4 px-1 font-medium sm:text-xl text-sucu-gray hover:text-sucu-pink-hover hover:border-gray-300',
+			{
+				'border-sucu-pink-hover text-indigo': isActive
+			}
+		)}
+		on:click={handleClick}
+	>
+		<slot />
+	</button>
+
+	{#if isActive}
+		<div
+			class={cn(
+				'absolute left-1/2 transform -translate-x-1/2 bottom-[5.5px] sm:-bottom-1 h-1 sm:h-2 w-[120%] bg-sucu-pink-hover rounded-lg'
+			)}
+			transition:slide={{ duration: 300, axis: 'x' }}
+		/>
+	{/if}
+</div>

src/lib/components/Tabs/tabsContext.ts

@@ -0,0 +1,43 @@
+import { writable, type Writable } from 'svelte/store';
+import { setContext, getContext } from 'svelte';
+
+interface Tab {
+	value: string;
+}
+
+export interface TabsContext {
+	activeTab: Writable<string>;
+	tabs: Writable<Tab[]>;
+	registerTab: (tab: Tab) => void;
+	selectTab: (value: string) => void;
+}
+
+const createTabs = (): TabsContext => {
+	const activeTab = writable<string>('');
+	const tabs = writable<Tab[]>([]);
+
+	const registerTab = (tab: Tab) => {
+		tabs.update((currTabs) => [...currTabs, tab]);
+	};
+
+	const selectTab = (value: string) => {
+		activeTab.set(value);
+	};
+
+	return {
+		activeTab,
+		tabs,
+		registerTab,
+		selectTab
+	};
+};
+
+export const setTabsContext = (): TabsContext => {
+	const tabs = createTabs();
+	setContext<TabsContext>('tabs', tabs);
+	return tabs;
+};
+
+export const getTabsContext = (): TabsContext => {
+	return getContext<TabsContext>('tabs');
+};