From 963ed360766d0a8235cc178b30272eb01dc1bc73 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Thu, 14 Dec 2023 12:14:22 +0100
Subject: [PATCH] :construction: started working on questions-page

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 .../components/svg/ArrowChevronLeft.svelte    |  8 +++
 frontend/src/routes/questions/+page.svelte    | 68 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 frontend/src/components/svg/ArrowChevronLeft.svelte
 create mode 100644 frontend/src/routes/questions/+page.svelte

diff --git a/frontend/src/components/svg/ArrowChevronLeft.svelte b/frontend/src/components/svg/ArrowChevronLeft.svelte
new file mode 100644
index 0000000..51a8ae7
--- /dev/null
+++ b/frontend/src/components/svg/ArrowChevronLeft.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    export let width:string
+</script>
+
+<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
+<svg xmlns="http://www.w3.org/2000/svg" height={width} width={width} viewBox="0 0 320 512">
+    <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/routes/questions/+page.svelte b/frontend/src/routes/questions/+page.svelte
new file mode 100644
index 0000000..e0efdb5
--- /dev/null
+++ b/frontend/src/routes/questions/+page.svelte
@@ -0,0 +1,68 @@
+<script>
+    import UserFormInput from "../../components/userform/UserFormInput.svelte";
+	import ButtonComponent from "../../components/ButtonComponent.svelte";
+    import ArrowChevronLeft from "../../components/svg/ArrowChevronLeft.svelte";
+</script>
+
+<div class="flex flex-col justify-center gap-4 h-full">
+    <div class="flex justify-center items-center mx-auto w-1/2 gap-4">
+        <h1 class="text-xl text-primary font-bold text-center">Spørsmål 3</h1>
+        <div class="border-r-2 border-primary h-24"></div>
+        <p>Hvis man begynner skabbehandling før man har fått symptomer, men får symptomer iløpet av den uka før man skal smøre seg igjen etter 7 dager, har da ikke første smøringen virket?</p>
+    </div>
+    <div class="flex justify-center gap-12">
+        <div class="flex flex-col gap-2">
+            <h1 class="text-xl text-primary font-bold text-center">Svar 1:</h1>
+            <div class="bg-secondary p-4 rounded-xl">
+                <p>
+                    Hei,
+                    Nye symptomer som utslett etter påbegynt skabbehandling er ikke uvanlig og betyr ikke nødvendigvis at behandlingen har feilet. Dette skyldes ofte kroppens reaksjon på skabbmiddene og behandlingen. Det er viktig å gjennomføre den andre kuren som planlagt. Vær oppmerksom på at kløe og utslett kan vedvare i opptil fire uker etter siste behandling, selv når behandlingen har vært effektiv. Hvis du opplever nye utslett mer enn fire uker etter behandlingens slutt, anbefales det å kontakte lege for en videre vurdering.
+                </p>
+            </div>
+        </div>
+        <div class="flex flex-col gap-2">
+            <h1 class="text-xl text-primary font-bold text-center">Svar 2:</h1>
+            <div class="bg-secondary p-4 rounded-xl">
+                <p>
+                    Hei,
+                    Nye symptomer som utslett etter påbegynt skabbehandling er ikke uvanlig og betyr ikke nødvendigvis at behandlingen har feilet. Dette skyldes ofte kroppens reaksjon på skabbmiddene og behandlingen. Det er viktig å gjennomføre den andre kuren som planlagt. Vær oppmerksom på at kløe og utslett kan vedvare i opptil fire uker etter siste behandling, selv når behandlingen har vært effektiv. Hvis du opplever nye utslett mer enn fire uker etter behandlingens slutt, anbefales det å kontakte lege for en videre vurdering.
+                </p>
+            </div>
+        </div>
+    </div>
+    <div class="flex justify-center h-4/5 gap-12">
+        <div class="flex flex-col justify-start items-center gap-4">
+            <UserFormInput inputType="radio" label="Kunnskap" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+            <UserFormInput inputType="radio" label="Empati" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+            <UserFormInput inputType="radio" label="Hjelpsomhet" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+        </div>
+        <div class="flex flex-col justify-start items-center gap-4">
+            <UserFormInput inputType="radio" label="Kunnskap" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+            <UserFormInput inputType="radio" label="Empati" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+            <UserFormInput inputType="radio" label="Hjelpsomhet" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
+        </div>
+    </div>
+    <div class="flex justify-center items-center gap-8 text-primary font-bold">
+        <a href="">
+            <button><ArrowChevronLeft width=16 />
+                Forrige spørsmål
+            </button>
+        </a>
+        <ButtonComponent text="Send inn svar" url="/" filled={true} />
+    </div>
+</div>
+
+<style lang="postcss">
+    :root {
+        color: theme(colors.content);
+        
+    }
+    li {
+        list-style-type: disc;
+        margin-left: 2rem;
+        font-size: large;
+    }
+    p {
+        font-size: medium;
+    }
+</style>
\ No newline at end of file