From d0bfa5bb7955b71a3060cf2ea290f6b981b89f48 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Tue, 12 Dec 2023 19:58:52 +0100
Subject: [PATCH] :art: add ButtonComponent

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 frontend/src/components/ButtonComponent.svelte | 15 +++++++++++++++
 frontend/src/routes/+page.svelte               |  6 +++++-
 frontend/src/routes/userform/+page.svelte      |  3 ++-
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/ButtonComponent.svelte

diff --git a/frontend/src/components/ButtonComponent.svelte b/frontend/src/components/ButtonComponent.svelte
new file mode 100644
index 0000000..d8c353c
--- /dev/null
+++ b/frontend/src/components/ButtonComponent.svelte
@@ -0,0 +1,15 @@
+<script>
+    export let text;
+    export let url;
+    export let filled = false;
+
+    let style;
+
+    if (!filled) {
+        style = "text-primary font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-primary hover:text-bg";
+    } else {
+        style = "bg-primary text-bg font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-bg hover:text-primary";
+    }
+</script>
+
+<button class={style}><a href={url}>{text}</a></button>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index aca44e5..a91e500 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,3 +1,7 @@
+<script>
+	import ButtonComponent from "../components/ButtonComponent.svelte";
+
+</script>
 <div class="flex flex-col justify-between items-center h-full">
     <div class="flex h-full items-center">
         <div class="flex flex-col w-3/5 gap-4 px-32">
@@ -12,7 +16,7 @@
             </ul>
         </div>
         <div class="flex justify-center items-center w-2/5">
-            <button class="text-primary font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-primary hover:text-bg"><a href="/form">Start undersøkelse</a></button>
+            <ButtonComponent text="Start undersøkelse" url="/userform" filled={false} />
         </div>
     </div>
     <div class="flex justify-center items-center gap-8 text-primary font-bold">
diff --git a/frontend/src/routes/userform/+page.svelte b/frontend/src/routes/userform/+page.svelte
index 7145bd3..086620b 100644
--- a/frontend/src/routes/userform/+page.svelte
+++ b/frontend/src/routes/userform/+page.svelte
@@ -1,6 +1,7 @@
 <script>
     import UserFormInput from "../../components/userform/UserFormInput.svelte";
     import ArrowBack from "../../components/svg/ArrowBack.svelte";
+	import ButtonComponent from "../../components/ButtonComponent.svelte";
 </script>
 
 <div class="flex flex-col justify-center gap-20 h-full ">
@@ -22,7 +23,7 @@
         </div>
     </div>
     <div class="flex justify-center items-center gap-8 text-primary font-bold">
-        <button class="font-bold uppercase border-primary border-2 rounded-xl px-8 py-3 bg-primary text-bg text-xs"><a href="/form">Start undersøkelse</a></button>
+        <ButtonComponent text="Start undersøkelse" url="/form" filled={true} />
     </div>
 </div>