🚧 laget overlay med stort hvitt panel ved klikk av panel

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>
     )
 }