From 5200e1c9c63f1ec2c9e833cfec43f114752dd050 Mon Sep 17 00:00:00 2001
From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no>
Date: Fri, 28 Jul 2023 17:18:50 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20laget=20overlay=20med=20stort=20?=
 =?UTF-8?q?hvitt=20panel=20ved=20klikk=20av=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/FeilCard.tsx | 32 ++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/FeilCard.tsx b/frontend/src/components/FeilCard.tsx
index f67b197..78bdfc5 100644
--- a/frontend/src/components/FeilCard.tsx
+++ b/frontend/src/components/FeilCard.tsx
@@ -1,6 +1,7 @@
 import "@navikt/ds-css";
-import { Heading, Tag } from "@navikt/ds-react";
+import { Button, Heading, Tag } from "@navikt/ds-react";
 import { IFeilmelding } from "../interface";
+import { useState } from "react";
 
 interface TagBarInterface {
     haster: boolean
@@ -35,18 +36,45 @@ const TagBar = (props: TagBarInterface) => {
 // export default FeilCard1;
 
 export const FeilCard = (props: IFeilmelding) => {
+    const [visFeilinformasjon, setVisFeilinformasjon] = useState(false)
+
+    const FullvisningsKort = () => {    
+        return(
+            <div className="h-screen w-screen absolute top-0 right-0 bg-grayalpha-800">
+                <div className="w-full h-full flex justify-center items-center">
+                    <div className="
+                        bg-bg-default border border-border-default p-7 rounded-lg
+                        h-1/2 w-1/2
+                    ">
+                        <Button onClick={() => {
+                                setVisFeilinformasjon(false)
+                        }}>
+                            Avslutt kortvisning
+                        </Button>
+                    </div>                    
+                </div>
+            </div>
+        )
+    }
+
     return(
         <div className="
             bg-bg-default border border-border-default p-7 rounded-lg 
             flex justify-between flex-col
             hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
             active:bg-surface-active
-            ">
+            "
+            onClick={() => {
+                setVisFeilinformasjon(true)
+            }}>
+
             <div>
                 <Heading size="medium">{props.tittel}</Heading>
                 <p>{props.beskrivelse}</p>       
             </div>
             <TagBar haster={false}/>
+
+            {visFeilinformasjon ? <FullvisningsKort/> : <></>}
         </div>
     )
 }