From 0329e2f8eed9617b9d7ddbbe395d896223fae8f0 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 19 Dec 2024 14:43:54 -0500
Subject: [PATCH] refactor Tabs to separate components

---
 src/lib/components/common/Tabs/Tab.svelte     |  5 ++
 .../common/Tabs/Tabs.stories.svelte           | 27 +++++++++++
 src/lib/components/common/Tabs/Tabs.svelte    | 36 ++++++++++++++
 src/lib/components/common/Tabs/index.ts       |  4 ++
 src/routes/login/+page.svelte                 | 47 ++++++-------------
 5 files changed, 87 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/components/common/Tabs/Tab.svelte
 create mode 100644 src/lib/components/common/Tabs/Tabs.stories.svelte
 create mode 100644 src/lib/components/common/Tabs/Tabs.svelte
 create mode 100644 src/lib/components/common/Tabs/index.ts

diff --git a/src/lib/components/common/Tabs/Tab.svelte b/src/lib/components/common/Tabs/Tab.svelte
new file mode 100644
index 0000000..b466afb
--- /dev/null
+++ b/src/lib/components/common/Tabs/Tab.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { active, label, onclick } = $props();
+</script>
+
+<input aria-label={label} type="radio" role="tab" class="tab" class:tab-active={active} {onclick} />
\ No newline at end of file
diff --git a/src/lib/components/common/Tabs/Tabs.stories.svelte b/src/lib/components/common/Tabs/Tabs.stories.svelte
new file mode 100644
index 0000000..408c4a8
--- /dev/null
+++ b/src/lib/components/common/Tabs/Tabs.stories.svelte
@@ -0,0 +1,27 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Tabs from './Tabs.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Tabs',
+		component: Tabs,
+		tags: ['autodocs'],
+		argTypes: {
+			size: {
+				control: 'select',
+				options: ['xs', 'sm', 'rg', 'lg']
+			},
+			variant: {
+				control: 'select',
+				options: ['none', 'bordered', 'lifted', 'boxed']
+			}
+		}
+	});
+</script>
+
+{#snippet template(args: Partial<ComponentProps<typeof Tabs>>)}
+	<Tabs tabs={['Tab 1', 'Tab 2']} {...args} />
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
\ No newline at end of file
diff --git a/src/lib/components/common/Tabs/Tabs.svelte b/src/lib/components/common/Tabs/Tabs.svelte
new file mode 100644
index 0000000..3c897e8
--- /dev/null
+++ b/src/lib/components/common/Tabs/Tabs.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { DaisySize } from '$lib/types';
+	import Tab from './Tab.svelte';
+
+	type Props = {
+		size?: DaisySize;
+		tabs: string[];
+		selected?: number;
+		variant?: 'none' | 'bordered' | 'lifted' | 'boxed';
+	};
+
+	let { size, tabs, selected: value = $bindable(0), variant = 'none' }: Props = $props();
+</script>
+
+<div
+	role="tablist"
+	class="tabs w-full"
+	class:tabs-xs={size === 'xs'}
+	class:tabs-sm={size === 'sm'}
+	class:tabs-lg={size === 'lg'}
+	class:tabs-bordered={variant === 'bordered'}
+	class:tabs-lifted={variant === 'lifted'}
+	class:tabs-boxed={variant === 'boxed'}
+>
+	{#each tabs as tab, index}
+		{#key [tab, value]}
+			<Tab
+				active={index === value}
+				label={tab}
+				onclick={() => {
+					value = index;
+				}}
+			/>
+		{/key}
+	{/each}
+</div>
\ No newline at end of file
diff --git a/src/lib/components/common/Tabs/index.ts b/src/lib/components/common/Tabs/index.ts
new file mode 100644
index 0000000..5ef8a17
--- /dev/null
+++ b/src/lib/components/common/Tabs/index.ts
@@ -0,0 +1,4 @@
+import Tabs from './Tabs.svelte';
+
+export default Tabs;
+export { default as Tabs } from './Tabs.svelte';
\ No newline at end of file
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 9c17b9d..923958a 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -2,10 +2,10 @@
 	import Button from '$lib/components/Button.svelte';
 	import Container from '$lib/components/common/Container.svelte';
 	import TextInput from '$lib/components/TextInput.svelte';
+	import Tabs from '$lib/components/common/Tabs';
 	import { fade } from 'svelte/transition';
 
-	let mode: 'register' | 'login' = $state('login');
-	let action = $derived(mode === 'login' ? '?/login' : '?/register');
+	let tab: 0 | 1 = $state(0);
 </script>
 
 {#snippet userIcon()}
@@ -20,38 +20,21 @@
 	<i class="fi fi-rr-user"></i>
 {/snippet}
 
+{#snippet form(variant: 'login' | 'register')}
+	<form class="flex w-full flex-col items-center gap-6" method="POST" action={`?/${variant}`}>
+		<TextInput start={userIcon} placeholder="Email" name="email" type="email" />
+		<TextInput start={passwordIcon} placeholder="Password" name="password" type="password" />
+		{#if variant === 'register'}
+			<TextInput start={nameIcon} placeholder="Name" name="name" fade />
+		{/if}
+		<Button block type="submit" label="Submit" outline />
+	</form>
+{/snippet}
+
 <div class="page" transition:fade>
 	<Container>
-		<form class="flex w-full flex-col items-center gap-6" method="POST" {action}>
-			<h1 class="text-3xl">Hestia</h1>
-			<br />
-			<div role="tablist" class="tabs tabs-bordered tabs-lg w-full">
-				<button
-					type="button"
-					role="tab"
-					class="tab"
-					class:tab-active={mode === 'login'}
-					onclick={() => {
-						mode = 'login';
-					}}>Login</button
-				>
-				<button
-					type="button"
-					role="tab"
-					class="tab"
-					class:tab-active={mode === 'register'}
-					onclick={() => {
-						mode = 'register';
-					}}>Register</button
-				>
-			</div>
-			<TextInput start={userIcon} placeholder="Email" name="email" type="email" />
-			<TextInput start={passwordIcon} placeholder="Password" name="password" type="password" />
-			{#if mode === 'register'}
-				<TextInput start={nameIcon} placeholder="Name" name="name" fade />
-			{/if}
-			<Button block type="submit" label="Submit" outline />
-		</form>
+		<Tabs variant="bordered" bind:selected={tab} tabs={['Login', 'Register']} />
+		{@render form(tab === 0 ? 'login' : 'register')}
 	</Container>
 </div>