add tabs component

src/routes/+page.svelte

@@ -29,6 +29,7 @@
 		TextUnderline
 	} from 'phosphor-svelte';
 	import type { Option } from '$lib';
+	import Tabs from '$lib/Tabs.svelte';
 
 	let dateInputValue = $state<CalendarDate | undefined>(undefined);
 	let checkboxValue = $state<CheckboxState>('indeterminate');
@@ -276,6 +277,76 @@
 	</div>
 </div>
 
+<div class="component">
+	<p class="title">Tabs</p>
+
+	<Tabs
+		pages={[
+			{
+				title: 'Dashboard',
+				content: tab1
+			},
+			{
+				title: 'Activity',
+				content: tab2
+			},
+			{
+				title: 'Settings',
+				content: tab3
+			}
+		]}
+	/>
+
+	{#snippet tab1()}
+		<h3 class="mb-4 text-2xl font-bold">Dashboard Overview</h3>
+		<div class="grid grid-cols-2 gap-4">
+			<div class="rounded bg-blue-100 p-4">
+				<h4 class="font-semibold">Total Users</h4>
+				<p class="text-3xl font-bold text-blue-600">1,247</p>
+			</div>
+			<div class="rounded bg-green-100 p-4">
+				<h4 class="font-semibold">Revenue</h4>
+				<p class="text-3xl font-bold text-green-600">$12,450</p>
+			</div>
+		</div>
+	{/snippet}
+
+	{#snippet tab2()}
+		<h3 class="mb-3 text-xl font-semibold">Recent Activity</h3>
+		<ul class="space-y-2">
+			<li class="flex items-center gap-2">
+				<span class="h-2 w-2 rounded-full bg-green-500"></span>
+				<span>User John Doe logged in</span>
+			</li>
+			<li class="flex items-center gap-2">
+				<span class="h-2 w-2 rounded-full bg-blue-500"></span>
+				<span>New order #1234 received</span>
+			</li>
+			<li class="flex items-center gap-2">
+				<span class="h-2 w-2 rounded-full bg-yellow-500"></span>
+				<span>System backup completed</span>
+			</li>
+		</ul>
+	{/snippet}
+
+	{#snippet tab3()}
+		<h3 class="mb-3 text-xl font-semibold">Settings</h3>
+		<form class="space-y-3">
+			<div class="flex items-center gap-2">
+				<input type="checkbox" id="notifications" checked />
+				<label for="notifications">Enable notifications</label>
+			</div>
+			<div class="flex items-center gap-2">
+				<input type="checkbox" id="darkmode" />
+				<label for="darkmode">Dark mode</label>
+			</div>
+			<button class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+				Save Changes
+			</button>
+		</form>
+	{/snippet}
+</div>
+
 <Dialog
 	bind:open={dialogOpen}
 	title="Dialog Title"