feat: adds basic components

src/app.css

@@ -6,5 +6,17 @@ html, body {
     width: 100%;
     height: 100%;
     margin: 0;
+}
+
+* {
     background-color: black;
-}
+    color: white;
+}
+
+input {
+    background-color: rgba(0, 0, 0, 0.452);
+}
+
+/*
+    #000000 #2D82B7 #3A96CF
+*/

src/lib/components/utils/Button.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    let {type="button", width="fit-content", onclick, children}: {type?: "button" | "submit" | "reset"; width?: string; onclick?: () => void; children: any} = $props()
+</script>
+
+<button type={type} onclick={onclick} style="width: {width};" class="h-[34px] bg-[#2D82B7] hover:bg-[#3A96CF] pl-2 pr-2">{@render children?.()}</button>

src/lib/components/utils/Center.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    let {children}: {children: any } = $props()
+</script>
+
+<div class="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-center">
+    {@render children?.()}
+</div>

src/lib/components/utils/Input.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  let { name, type="text", labelSize="medium", inputWidth="inherit", value = $bindable(), children}: { name: string; type?: string; labelSize?: string; inputWidth?: string; value?: string; children: any } = $props();
+</script>
+
+<label for={name} class="font-bold underline pr-4" style="font-size: {labelSize};">{@render children?.()}</label>
+<input name={name} type={type} bind:value={value} class="border-[#2D82B7] focus:border-[#3A96CF] border-[2px] outline-none p-1" style="width: {inputWidth};"/>

src/lib/components/utils/Link.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    let { href, onclick, children }: {href?: string, onclick?: any, children: any } = $props()
+</script>
+
+<a href={href} onclick={onclick} class="cursor-pointer text-[#2D82B7] underline hover:text-[#3A96CF]">
+    {@render children?.()}
+</a>