✨ Laget component til å vise feilsaker

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

@@ -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;

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