From 2f6ffbf758a7f64bd53e79ae1f2336fbb941eeb1 Mon Sep 17 00:00:00 2001
From: HerozDotExe <66215011+HerozDotExe@users.noreply.github.com>
Date: Sat, 2 Nov 2024 19:19:25 +0100
Subject: [PATCH] feat: adds basic components

---
 src/app.css                            | 14 +++++++++++++-
 src/lib/components/utils/Button.svelte |  5 +++++
 src/lib/components/utils/Center.svelte |  7 +++++++
 src/lib/components/utils/Input.svelte  |  6 ++++++
 src/lib/components/utils/Link.svelte   |  7 +++++++
 5 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/utils/Button.svelte
 create mode 100644 src/lib/components/utils/Center.svelte
 create mode 100644 src/lib/components/utils/Input.svelte
 create mode 100644 src/lib/components/utils/Link.svelte

diff --git a/src/app.css b/src/app.css
index 79a6761..a759fc3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -6,5 +6,17 @@ html, body {
     width: 100%;
     height: 100%;
     margin: 0;
+}
+
+* {
     background-color: black;
-}
\ No newline at end of file
+    color: white;
+}
+
+input {
+    background-color: rgba(0, 0, 0, 0.452);
+}
+
+/*
+    #000000 #2D82B7 #3A96CF
+*/
\ No newline at end of file
diff --git a/src/lib/components/utils/Button.svelte b/src/lib/components/utils/Button.svelte
new file mode 100644
index 0000000..7410b65
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/utils/Center.svelte b/src/lib/components/utils/Center.svelte
new file mode 100644
index 0000000..e77e5a4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/utils/Input.svelte b/src/lib/components/utils/Input.svelte
new file mode 100644
index 0000000..b5282c3
--- /dev/null
+++ b/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};"/>
diff --git a/src/lib/components/utils/Link.svelte b/src/lib/components/utils/Link.svelte
new file mode 100644
index 0000000..f08e01b
--- /dev/null
+++ b/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>
\ No newline at end of file