🏗️ Migrerer fra Next.js til Vite react

Co-authored-by: Øydis Kind Refsum <oydis.kind.refsum@nav.no>
Co-authored-by: Christian Bulow Skovborg <christian.bulow.skovborg@nav.no>
Co-authored-by: Amalie Mansåker <amalie.erdal.mansaker@nav.no>
Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no>

next-frontend/components/BildeOpplastning.tsx

@@ -0,0 +1,33 @@
+import { FileImageIcon, UploadIcon } from "@navikt/aksel-icons"
+import { Button } from "@navikt/ds-react"
+
+
+/**
+ * Inkluderer en knapp for opplastning i finder/explorer.
+ * Inkluderer et felt for drag and drop opplastning av bilder
+ * @returns `Drag and drop` komponent for filopplastning av skjermbilder
+ */
+const BildeOpplastning = () => {
+    return(
+        <div className="flex gap-2 flex-col">
+            <div className="
+                h-48 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500
+                rounded-lg border-dashed flex flex-col items-center justify-center text-center gap-2 
+            ">
+                <FileImageIcon 
+                    fontSize="3.5rem"
+                    className="text-blue-500"
+                /> 
+                <p className="text-surface-neutral">Dra og slipp skjermbilder her!</p>
+            </div>
+            <Button
+                variant="secondary"
+                icon={<UploadIcon />}
+            >
+                Last opp skjermbilder
+            </Button>     
+        </div>
+
+    )
+}
+export default BildeOpplastning

next-frontend/components/CardsContainer.tsx

@@ -0,0 +1,47 @@
+import FeilCard from "./FeilCard";
+
+type FeilMelding = {
+    tittel: String
+    beskrivelse: String
+}
+/**
+ * 
+ * @returns Komponent for returnering av konteiner med alle feilinnmeldingene. 
+ */
+const CardsContainer = () => {
+    
+    const feilMeldinger: FeilMelding[] = [
+        {
+            tittel: "Mangel på hensyn til tariffoppgjør",
+            beskrivelse: "Det har vært ett tariffoppgjør og speil sier sykepengene må tilbakekreves, noe som er feil. (sier vi.. har ikke domenekunnskap)"
+        },
+        {
+            tittel: "Speil sier NAV må tilbakekreve sykepenger på feil grunnlag",
+            beskrivelse: "baluba"
+        },
+        {
+            tittel: "Feil A",
+            beskrivelse: "Lorem Ipsum"
+        },
+        {
+            tittel: "Feil B",
+            beskrivelse: "dolor"
+        },
+        {
+            tittel: "Håndkle på hue",
+            beskrivelse: "Bombastic side eye"
+        }
+    ]
+
+    return(
+        <div>
+            <div className="grid grid-cols-2 gap-4">
+                {feilMeldinger.map((feilMelding) => (
+                    <FeilCard key={feilMelding.toString()} tittel={feilMelding.tittel} beskrivelse={feilMelding.beskrivelse}/> 
+                ))}
+            </div>     
+        </div>
+
+    )
+}
+export default CardsContainer

next-frontend/components/FeilCard.tsx

@@ -0,0 +1,38 @@
+import "@navikt/ds-css";
+import { ExpansionCard, Tag } from "@navikt/ds-react";
+
+interface feilmeldingInterface {
+    tittel: String,
+    beskrivelse: String
+}
+
+const TagBar = () => {
+    return (
+        <div className="flex gap-8 mt-4">
+            <Tag variant="info">Jobbes med</Tag>
+            <div className="flex gap-2">
+                <Tag variant="neutral">Spleiselaget</Tag>
+                <Tag variant="warning">Haster</Tag>
+            </div>
+        </div>
+    )
+}
+
+const FeilCard = (props: feilmeldingInterface) => {
+    return (
+        <ExpansionCard aria-label="tekst">
+            <ExpansionCard.Header>
+                <ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
+                <ExpansionCard.Description>
+                    {props.beskrivelse}
+                </ExpansionCard.Description>
+                <TagBar />
+            </ExpansionCard.Header>
+            <ExpansionCard.Content>
+                Hællæ
+            </ExpansionCard.Content>
+        </ExpansionCard>
+    )
+}
+
+export default FeilCard;

next-frontend/components/Header.tsx

@@ -0,0 +1,21 @@
+import { MenuGridIcon } from "@navikt/aksel-icons"
+import { InternalHeader, Dropdown } from "@navikt/ds-react"
+
+const Header = () => {
+    return(
+        <InternalHeader>
+            <InternalHeader.Title href="/#home">
+                Sprik
+            </InternalHeader.Title>
+            <Dropdown>
+                <InternalHeader.Button
+                    as={Dropdown.Toggle}
+                >
+                    <MenuGridIcon title="MenuGridIconer og oppslagsverk" />
+                </InternalHeader.Button>
+            {/* <Dropdown.Menu /> */}
+            </Dropdown>
+        </InternalHeader>
+    )
+}
+export default Header