sidski/helse-sprik
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 Laget Innholdskomponent

Browse source
This commit is contained in:
Markus Johansen 2023-08-02 10:57:59 +02:00
parent 8960bf2fcb
commit 08bb6de967
2 changed files with 64 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/components/FeilKort.tsx
View file

@ -1,12 +1,12 @@
import "@navikt/ds-css"; import "@navikt/ds-css";
import { Button, Modal, Radio, RadioGroup, TextField, Textarea } from "@navikt/ds-react"; import { Button, Modal} from "@navikt/ds-react";
import { IFeilmelding } from "../interface"; import { Feilmelding, IFeilmelding } from "../interface";
import FeilModal from "./FeilModal"; import FeilModal from "./FeilModal";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { FloppydiskIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons"; import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons";
import axios from "axios";
import FeilkortHeader from "./FeilkortHeader"; import FeilkortHeader from "./FeilkortHeader";
import RedigeringsVerktoy from "./RedigeringsVerktoy"; import RedigeringsVerktoy from "./RedigeringsVerktoy";
import FeilmeldingsInnhold from "./FeilmeldingsInnhold";
/** /**
* En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding. * En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
@ -58,38 +58,18 @@ const FeilKort = (props: IFeilKort) => {
setRedigeringsmodus={setRedigeringsmodus} setRedigeringsmodus={setRedigeringsmodus}
/> />
: :
<div> <FeilmeldingsInnhold
<div className="flex justify-between"> id={props.id}
<FeilkortHeader tittel={props.tittel}
id={props.id} beskrivelse={props.beskrivelse}
tittel={props.tittel} dato={props.dato}
beskrivelse={props.beskrivelse} haster={props.haster}
dato={props.dato} arbeidsstatus={props.arbeidsstatus}
haster={props.haster} setVisModal={setVisModal}
arbeidsstatus={props.arbeidsstatus} setRedigeringsmodus={setRedigeringsmodus}
/> >
<div className="flex gap-4 items-start"> <p>Her kommer det content</p>
<Button </FeilmeldingsInnhold>
variant="secondary"
icon={<PencilIcon/>}
onClick={() => setRedigeringsmodus(true)}
>
Rediger
</Button>
<Button
icon={<XMarkIcon/>}
onClick={() => {
setVisModal(false)
setRedigeringsmodus(false)
}}
>
Lukk
</Button>
</div>
</div>
<div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
{/* TODO: HER KOMMER CONTENT */}
</div>
} }
</FeilModal> </FeilModal>
</> </>

48
frontend/src/components/FeilmeldingsInnhold.tsx Normal file
View file

@ -0,0 +1,48 @@
import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
import { Button } from "@navikt/ds-react"
import { IFeilmelding } from "../interface"
import FeilkortHeader from "./FeilkortHeader"
interface FeilmeldingsInnholdInterface extends IFeilmelding {
children: React.ReactNode
setVisModal: (visModal: boolean) => void
setRedigeringsmodus: (redigeringsmodus: boolean) => void
}
const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
return(
<div>
<div className="flex justify-between">
<FeilkortHeader
id={props.id}
tittel={props.tittel}
beskrivelse={props.beskrivelse}
dato={props.dato}
haster={props.haster}
arbeidsstatus={props.arbeidsstatus} />
<div className="flex gap-4 items-start">
<Button
variant="secondary"
icon={<PencilIcon />}
onClick={() => props.setRedigeringsmodus(true)}
>
Rediger
</Button>
<Button
icon={<XMarkIcon />}
onClick={() => {
props.setVisModal(false)
props.setRedigeringsmodus(false)
}}
>
Lukk
</Button>
</div>
</div>
<div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
{props.children}
</div>
)
}
export default FeilmeldingsInnhold;