From 05a637c7d34781d8bfd0691e5a8563b43f1fc401 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Amalie=20Mans=C3=A5ker?= <amalie.erdal.mansaker@nav.no>
Date: Wed, 5 Jul 2023 16:04:42 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Laget=20component=20til=20=C3=A5=20?=
 =?UTF-8?q?vise=20feilsaker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no>
---
 frontend/components/FeilCard.tsx | 34 ++++++++++++++++++++++++++++++++
 frontend/pages/index.tsx         | 21 ++++++++++++++------
 2 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 frontend/components/FeilCard.tsx

diff --git a/frontend/components/FeilCard.tsx b/frontend/components/FeilCard.tsx
new file mode 100644
index 0000000..e08aa8e
--- /dev/null
+++ b/frontend/components/FeilCard.tsx
@@ -0,0 +1,34 @@
+import "@navikt/ds-css";
+import { ExpansionCard, Tag } from "@navikt/ds-react";
+
+const TagBar = () => {
+    return (
+        <div>
+            <Tag variant="info">Jobbes med</Tag>
+            <div>
+                <Tag variant="neutral">Spleiselaget</Tag>
+                <Tag variant="neutral">Haster</Tag>
+            </div>
+        </div>
+    )
+}
+
+const FeilCard = () => {
+    return (
+        <ExpansionCard aria-label="tekst">
+            <ExpansionCard.Header>
+                <ExpansionCard.Title>Dummy</ExpansionCard.Title>
+                <ExpansionCard.Description>
+                    Dummy Dummy Java
+                    <TagBar />
+                </ExpansionCard.Description>
+            </ExpansionCard.Header>
+            <ExpansionCard.Content>
+                Hællæ
+            </ExpansionCard.Content>
+
+        </ExpansionCard>
+    )
+}
+
+export default FeilCard;
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 0689625..2254a57 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,25 +1,34 @@
+import FeilCard from "@/components/feilCard";
 import "@navikt/ds-css";
-import { Button, Heading } from "@navikt/ds-react";
+import { Button, Heading, Search } from "@navikt/ds-react";
 import axios , { Axios, AxiosError } from "axios";
 import { log } from "console";
 import useSWR from "swr";
 
+
 const fetcher = (url: any) => axios.get(url).then(res => res.data)
 
 export default function Home() {
 
-  const {data, error, isLoading} = useSWR('http://0.0.0.0:8080/', fetcher);
-  console.log(data);
+  // const {data, error, isLoading} = useSWR('http://0.0.0.0:8080/', fetcher);
+  // console.log(data);
 
   return (
-    <main className="flex justify-center">
+    <main className="flex flex-col py-8 justify-center">
+      <Search
+        label="Søk gjennom innmeldte feil (nøkkelord, tags, status)"
+        variant="primary"
+        hideLabel={false}
+      />
+      <Heading level="1" size="medium">Innmeldte feil (saker, feilmeldingerm poster, feil)</Heading>
+
       <div className="w-1/2 flex flex-col gap-4 justify-center text-center">
-        <Heading level="1" size="xlarge">Sprik</Heading>
         <Button variant="primary">Meld inn feil</Button>
         <Button variant="secondary">Meld inn funksjonalitetsønsker</Button>
       
-        {data ? <div>{data}</div> : <div>Laster</div>}
+        {/* {data ? <div>{data}</div> : <div>Laster</div>} */}
       </div>
+      <FeilCard />
     </main>
   )
 }