login using daisy

src/lib/components/Button.svelte

@@ -3,6 +3,7 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	interface Props {
+		block?: boolean;
 		color?: DaisyColor;
 		glass?: boolean;
 		label: string;
@@ -15,6 +16,7 @@
 	}
 
 	let {
+		block = false,
 		color,
 		glass = false,
 		label,
@@ -31,6 +33,7 @@
 	{type}
 	onclick={onClick}
 	class:btn-outline={outline}
+	class:btn-block={block}
 	class:btn-wide={wide}
 	class:glass
 	class:btn-xs={size === 'xs'}

src/lib/components/common/Container.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { fade as fadeTransition } from 'svelte/transition';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		children?: Snippet;
+		fade?: boolean;
+	} & SvelteHTMLElements['div'];
+
+	let { children, fade = false, ...props }: Props = $props();
+</script>
+
+<div
+	transition:fadeTransition={{ duration: fade ? 200 : 0 }}
+	{...props}
+	class={twMerge('container-body', props.class)}
+>
+	{@render children?.()}
+</div>
+
+<style>
+	.container-body {
+		@apply container h-fit w-fit max-w-lg animate-fade rounded-lg bg-base-200 p-8 transition-transform;
+	}
+</style>

src/routes/+layout.svelte

@@ -9,6 +9,6 @@
 
 <style>
 	.layout {
-		@apply h-screen w-screen animate-fade bg-base-100;
+		@apply h-screen w-screen bg-base-100;
 	}
 </style>

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import Loader from '$lib/components/Loader.svelte';
+	import { fade } from 'svelte/transition';
 
 	let { data } = $props();
 
@@ -12,8 +13,7 @@
 	});
 </script>
 
-<div class="site-loader">
-	<h1>Hestia</h1>
+<div class="site-loader" transition:fade>
 	<Loader />
 </div>
 

src/routes/login/+page.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
 	import Button from '$lib/components/Button.svelte';
+	import Container from '$lib/components/common/Container.svelte';
 	import TextInput from '$lib/components/TextInput.svelte';
-	import { fade, scale } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 
 	let mode: 'register' | 'login' = $state('login');
 	let action = $derived(mode === 'login' ? '?/login' : '?/register');
-
-	function onViewToggle() {
-		mode = mode === 'login' ? 'register' : 'login';
-	}
 </script>
 
 {#snippet userIcon()}
@@ -23,32 +20,43 @@
 	<i class="fi fi-rr-user"></i>
 {/snippet}
 
-<div class="page">
-	<h1 class="underline">Hestia</h1>
-	<div class="login">
-		<form method="POST" {action} transition:scale>
-			<h2 transition:fade>{mode === 'login' ? 'Login' : 'Register'}</h2>
+<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}
-			<div class="flex gap-2">
-				<Button onClick={onViewToggle} label={mode === 'login' ? 'Register' : 'Login'} />
-				<Button type="submit" label="Submit" />
-			</div>
+			<Button block type="submit" label="Submit" outline />
 		</form>
-	</div>
+	</Container>
 </div>
 
 <style>
 	.page {
 		@apply flex flex-col items-center justify-around gap-24 py-[10%];
 	}
-	.login {
-		@apply w-fit max-w-lg animate-fade rounded-lg bg-white p-8;
-	}
-	.login > form {
-		@apply flex w-full flex-col items-center gap-8 rounded-lg;
-	}
 </style>