From 6f6399538ee519e2410ac8de0732b6c3cece9e63 Mon Sep 17 00:00:00 2001
From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no>
Date: Wed, 2 Aug 2023 18:09:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Laget=20mulighet=20for=20=C3=A5?=
 =?UTF-8?q?=20skrive=20inn=20og=20submitte=20kommentar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/FeilKort.tsx          |  5 ++-
 .../src/components/FeilmeldingsInnhold.tsx    | 42 +++++++++++++++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/FeilKort.tsx b/frontend/src/components/FeilKort.tsx
index 08a5cfb..31ddbe9 100644
--- a/frontend/src/components/FeilKort.tsx
+++ b/frontend/src/components/FeilKort.tsx
@@ -46,7 +46,10 @@ const FeilKort = (props: IFeilKort) => {
                     arbeidsstatus={props.arbeidsstatus}
                 />
             </div>
-            <FeilModal open={visModal} setOpen={setVisModal} >
+            <FeilModal 
+                open={visModal} 
+                setOpen={setVisModal} 
+            >
                 {redigeringsmodus ? 
                     <RedigeringsVerktoy 
                         id={props.id}
diff --git a/frontend/src/components/FeilmeldingsInnhold.tsx b/frontend/src/components/FeilmeldingsInnhold.tsx
index 50384ac..3f4c555 100644
--- a/frontend/src/components/FeilmeldingsInnhold.tsx
+++ b/frontend/src/components/FeilmeldingsInnhold.tsx
@@ -1,9 +1,14 @@
-import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
-import { Button } from "@navikt/ds-react"
+import { ChatElipsisIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
+import { Button, Chat, TextField, Textarea } from "@navikt/ds-react"
 import { FeilmeldingsInnholdInterface } from "../interface"
 import FeilkortHeader from "./FeilkortHeader"
+import { useState } from "react"
+
 
 const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
+    const [kommentar, setKommentar] = useState("") 
+    const [kommentarfelt, setKommentarfelt] = useState("")
+
     return(
         <div>
             <div className="flex justify-between">
@@ -16,7 +21,7 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
                     arbeidsstatus={props.arbeidsstatus} />
                 <div className="flex gap-4 items-start">
                     <Button
-                        variant="secondary"
+                        variant="tertiary"
                         icon={<PencilIcon />}
                         onClick={() => props.setRedigeringsmodus(true)}
                     >
@@ -35,7 +40,38 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
             </div>
             <div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
             {props.children}
+            {kommentar.length === 0 ? <></> : (<Kommentar tekst={kommentar}/>)}
+            <div className="flex items-end gap-12 w-full mt-12">
+                <TextField
+                    className="grow"
+                    label="Skriv inn din kommentar til feilen"
+                    value={kommentarfelt}
+                    onChange={e => setKommentarfelt(e.target.value)}
+                >
+
+                </TextField>
+                <Button
+                    variant="secondary"
+                    icon={<ChatElipsisIcon/>}
+                    onClick={() => {
+                        setKommentar(kommentarfelt)
+                    }}
+                >
+                    Legg til kommentar
+                </Button>
+            </div>
         </div>
     )
 }
 export default FeilmeldingsInnhold;
+
+
+const Kommentar = ({tekst} : {tekst: string}) => {
+    return(
+            <Chat>
+                <Chat.Bubble from="user" timestamp="10:00">
+                    <p>{tekst}</p>
+                </Chat.Bubble>
+            </Chat>
+    )
+}
\ No newline at end of file