From 7c3f87079bb5a483c05ecc61176635791d4ae424 Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Tue, 12 Dec 2023 19:38:41 +0100
Subject: [PATCH] :sparkles: new components for radio and select

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 .../components/userform/UserFormInput.svelte    | 17 +++++++++++++++++
 .../userform/inputs/RadioButtons.svelte         | 12 ++++++++++++
 .../components/userform/inputs/Select.svelte    |  9 +++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 frontend/src/components/userform/UserFormInput.svelte
 create mode 100644 frontend/src/components/userform/inputs/RadioButtons.svelte
 create mode 100644 frontend/src/components/userform/inputs/Select.svelte

diff --git a/frontend/src/components/userform/UserFormInput.svelte b/frontend/src/components/userform/UserFormInput.svelte
new file mode 100644
index 0000000..91a1276
--- /dev/null
+++ b/frontend/src/components/userform/UserFormInput.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    export let inputType:string
+    export let label:string
+    export let options: string[]
+	import RadioButtons from "./inputs/RadioButtons.svelte"
+    import Select from "./inputs/Select.svelte";
+</script>
+
+<div class="flex justify-start items-center h-1/4 w-full ">
+    <p class="text-primary font-bold">{label}:</p>
+    {#if inputType == "radio"}
+        <RadioButtons options={options}/>
+    {/if}
+    {#if inputType == "select"}
+        <Select options={options}/>
+    {/if}
+</div>
diff --git a/frontend/src/components/userform/inputs/RadioButtons.svelte b/frontend/src/components/userform/inputs/RadioButtons.svelte
new file mode 100644
index 0000000..c97b4e7
--- /dev/null
+++ b/frontend/src/components/userform/inputs/RadioButtons.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    export let options:string[]
+</script>
+
+<div class="flex justify-between">
+{#each options as data, index (data)}
+    <div class="flex flex-col justify-center items-center w-24 ">
+        <button name={data} class="h-7 w-7 rounded-full border-2 border-primary hover:bg-primary"></button>
+        <label class="text-primary text-sm mt-1" for={data}>{data}</label>
+    </div>
+{/each}
+</div>
diff --git a/frontend/src/components/userform/inputs/Select.svelte b/frontend/src/components/userform/inputs/Select.svelte
new file mode 100644
index 0000000..300f2ec
--- /dev/null
+++ b/frontend/src/components/userform/inputs/Select.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let options:string[]
+</script>
+
+<select class="ml-6 pl-2 pr-16 py-2 rounded-xl text-primary border-primary border-2 text-start hover:cursor-pointer ">
+    {#each options as data, index (data)}
+        <option id={data}>{data}</option>
+    {/each}
+</select>