add frontend and swap whole stack to sveltekit/nodejs

src/lib/components/Input/Input.svelte

@@ -0,0 +1,72 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import { IconSolid } from 'svelte-heros-v2';
+
+	export let id: string;
+	export let name: string | null = null;
+	export let type: string;
+	export let value: string | null = null;
+	export let required = false;
+	export let disabled = false;
+
+	export let inputElement: HTMLInputElement | undefined = undefined;
+
+	let initialType = type;
+</script>
+
+<!-- the cursor-not-allowed class must be set here because a disabled button does not respect the 'cursor' css property -->
+<div class={type === 'submit' && disabled ? 'cursor-not-allowed' : ''}>
+	{#if type === 'submit'}
+		<input class="btn" {id} type="submit" {value} {disabled} bind:this={inputElement} />
+	{:else}
+		<div>
+			{#if $$slots.label}
+				<label class="label" for={id}>
+					<span class="label-text">
+						<slot name="label" />
+						{#if required}
+							<span class="text-red-700">*</span>
+						{/if}
+					</span>
+				</label>
+			{/if}
+			<div class="flex items-center">
+				<input
+					class={type === 'checkbox'
+						? 'checkbox'
+						: `input input-bordered w-[100%] sm:max-w-[16rem] ${
+								initialType === 'password' ? 'pr-11' : ''
+						  }`}
+					{id}
+					{name}
+					{type}
+					{value}
+					{required}
+					{disabled}
+					bind:this={inputElement}
+				/>
+				{#if initialType === 'password'}
+					<button
+						class="relative right-9"
+						type="button"
+						on:click={() => {
+							type = type === 'password' ? 'text' : 'password';
+						}}
+					>
+						{#if type === 'password'}
+							<IconSolid name="eye-slash-solid" />
+						{:else}
+							<IconSolid name="eye-solid" />
+						{/if}
+					</button>
+				{/if}
+			</div>
+			{#if $$slots.notice}
+				<label class="label" for={id}>
+					<span class="label-text-alt"><slot name="notice" /></span>
+				</label>
+			{/if}
+		</div>
+	{/if}
+</div>

src/lib/components/Input/Select.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let id: string;
+	export let name: string | null = null;
+	export let value: string;
+	export let label: string | null = null;
+	export let notice: string | null = null;
+	export let required = false;
+	export let disabled = false;
+</script>
+
+<div>
+	{#if label}
+		<label class="label" for={id}>
+			<span class="label-text">
+				{label}
+				{#if required}
+					<span class="text-red-700">*</span>
+				{/if}
+			</span>
+		</label>
+	{/if}
+	<select
+		class="input input-bordered w-[100%] sm:max-w-[16rem]"
+		{id}
+		{name}
+		{required}
+		{disabled}
+		bind:value
+	>
+		<slot />
+	</select>
+	{#if notice}
+		<label class="label" for={id}>
+			<span class="label-text-alt">{notice}</span>
+		</label>
+	{/if}
+</div>