feat: initial logins

src/lib/components/Button.svelte

@@ -5,29 +5,50 @@
         onclick?: (event: MouseEvent) => void;
         disabled?: boolean;
         type?: "button" | "submit" | "reset";
+        style?: "normal" | "red";
+        formaction?: string;
         children?: Snippet;
     }
-    const { children, ...rest }: Props = $props();
+    interface LinkProps {
+        href: string;
+        type: "link";
+        style?: "normal" | "red";
+        children?: Snippet;
+    }
+    const { children, type, style = "normal", ...rest }: Props | LinkProps = $props();
 </script>
 
-<button {...rest}>
-    {@render children?.()}
-</button>
+{#if type === "link"}
+    <a {...rest} class="button {style}">
+        {@render children?.()}
+    </a>
+{:else}
+    <button class="button {style}" {type} {...rest}>
+        {@render children?.()}
+    </button>
+{/if}
 
 <style>
-    button {
+    .button {
         padding: 0.5rem 1rem;
         border-radius: 0.5rem;
-        background: linear-gradient(-83deg, #3fb095, #49bd85);
         box-shadow: 0rem 0rem 0.5rem #182125;
         color: #eaffeb;
         border: none;
         cursor: pointer;
+        text-decoration: none;
+        text-align: center;
     }
-    button:focus {
+    .normal {
+        background: linear-gradient(-83deg, #3fb095, #49bd85);
+    }
+    .red {
+        background-color: #bd4949;
+    }
+    .button:focus {
         outline: 2px solid #007bff;
     }
-    button:disabled {
+    .button:disabled {
         background: linear-gradient(-18deg, #66697b, #4e4e5e);
         cursor: not-allowed;
     }

src/lib/components/inputs/Text.svelte

@@ -5,12 +5,13 @@
         value?: string | null;
         placeholder?: string;
         required?: boolean;
+        type?: "text" | "password" | "email" | "number";
     }
 
     let { inputElem = $bindable(), value = $bindable(), name, ...rest }: Props = $props();
 </script>
 
-<input type="text" id={name} {name} bind:value bind:this={inputElem} {...rest} />
+<input id={name} {name} bind:value bind:this={inputElem} {...rest} />
 
 <style>
     input {