From d9e984c292b2551feea7e6de3247b2dd39c78276 Mon Sep 17 00:00:00 2001
From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no>
Date: Tue, 11 Jul 2023 08:03:58 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Komponentisering=20og=20formater?=
 =?UTF-8?q?ing=20av=20FeilKort=20og=20FeilkortKonteiner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/CardsContainer.tsx | 27 ++++++++++++++++++++++++++
 frontend/components/FeilCard.tsx       |  3 +--
 frontend/pages/index.tsx               | 13 ++-----------
 3 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 frontend/components/CardsContainer.tsx

diff --git a/frontend/components/CardsContainer.tsx b/frontend/components/CardsContainer.tsx
new file mode 100644
index 0000000..80014eb
--- /dev/null
+++ b/frontend/components/CardsContainer.tsx
@@ -0,0 +1,27 @@
+import FeilCard from "./FeilCard";
+
+
+/**
+ * 
+ * @returns Komponent for returnering av konteiner med alle feilinnmeldingene. 
+ */
+const CardsContainer = () => {
+    return(
+        <div>
+            <div className="bg-red-500 grid grid-cols-2 gap-4">
+                <FeilCard />  
+                <FeilCard />  
+                <FeilCard />  
+                <FeilCard />  
+            </div>
+            <div className="bg-blue-500 flex flex-row flex-wrap gap-4">
+                <FeilCard />  
+                <FeilCard />  
+                <FeilCard />  
+                <FeilCard />  
+            </div>        
+        </div>
+
+    )
+}
+export default CardsContainer
\ No newline at end of file
diff --git a/frontend/components/FeilCard.tsx b/frontend/components/FeilCard.tsx
index 81ced41..b972ce2 100644
--- a/frontend/components/FeilCard.tsx
+++ b/frontend/components/FeilCard.tsx
@@ -21,12 +21,11 @@ const FeilCard = () => {
                 <ExpansionCard.Description>
                     Dummy Dummy Java 
                 </ExpansionCard.Description>
-                    <TagBar />
+                <TagBar />
             </ExpansionCard.Header>
             <ExpansionCard.Content>
                 Hællæ
             </ExpansionCard.Content>
-
         </ExpansionCard>
     )
 }
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 35a3d9f..7ba250b 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,10 +1,9 @@
-import FeilCard from "../components/FeilCard";
+import CardsContainer from "@/components/CardsContainer";
 import "@navikt/ds-css";
 import { Button, Heading, Search } from "@navikt/ds-react";
 import router from "next/router";
 
 export default function Home() {
-
   const handleFeil = () => {
     router.push('/feil')
   }
@@ -12,7 +11,6 @@ export default function Home() {
   return (
     <main className="flex flex-col h-screen">
       <div className="h-12 bg-gray-900"></div>
-
       <div className="flex justify-center grow">
         <div className="bg-bg-subtle w-1/6 p-8 flex flex-col justify-end">
           <div className="flex flex-col gap-4 text-center bottom-0">
@@ -42,14 +40,7 @@ export default function Home() {
           >
             Innmeldte feil (saker, feilmeldinger poster, feil)
           </Heading>
-          <div className="grid grid-cols-2 gap-4">
-            <FeilCard />  
-            <FeilCard />  
-            <FeilCard />  
-            <FeilCard />  
-
-
-          </div>
+          <CardsContainer/>
         </div>
 
         <div className="bg-bg-subtle w-1/6 p-8">