add admin admin settings

src/lib/components/Input/Input.svelte

@@ -3,10 +3,11 @@
 <script lang="ts">
 	import { IconSolid } from 'svelte-heros-v2';
 
-	export let id: string;
+	export let id: string | null = null;
 	export let name: string | null = null;
 	export let type: string;
 	export let value: string | null = null;
+	export let placeholder: string | null = null;
 	export let required = false;
 	export let disabled = false;
 
@@ -18,7 +19,7 @@
 <!-- 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} />
+		<input class="btn" {id} type="submit" {disabled} bind:value bind:this={inputElement} />
 	{:else}
 		<div>
 			{#if $$slots.label}
@@ -31,24 +32,29 @@
 					</span>
 				</label>
 			{/if}
-			<div class="flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
+			<div class="relative flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
 				<input
 					class:checkbox={type === 'checkbox'}
-					class:input,input-bordered={type !== 'checkbox'}
-					class:w-[100%]={initialType !== 'password' && initialType !== 'checkbox'}
+					class:input,input-bordered,w-[100%]={type !== 'checkbox'}
 					class:pr-11={initialType === 'password'}
 					{id}
 					{name}
 					{type}
 					{value}
+					{placeholder}
 					{required}
 					{disabled}
-					autocomplete="off"
 					bind:this={inputElement}
+					autocomplete="off"
+					on:input={(e) => {
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-ignore
+						value = e.target?.value;
+					}}
 				/>
 				{#if initialType === 'password'}
 					<button
-						class="relative right-9"
+						class="absolute right-3"
 						type="button"
 						on:click={() => {
 							type = type === 'password' ? 'text' : 'password';