💄 La til knapper for redigering og lukk

Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no>
This commit is contained in:
Sindre Kjelsrud 2023-08-01 11:48:28 +02:00
parent a9c267e309
commit 02178d187f
2 changed files with 22 additions and 2 deletions

View file

@ -1,8 +1,9 @@
import "@navikt/ds-css"; import "@navikt/ds-css";
import { Heading, Modal, Tag } from "@navikt/ds-react"; import { Button, Heading, Modal, Tag } from "@navikt/ds-react";
import { IFeilmelding } from "../interface"; import { IFeilmelding } from "../interface";
import FeilModal from "./FeilModal"; import FeilModal from "./FeilModal";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons";
/** /**
* 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.
@ -34,7 +35,25 @@ export const FeilKort = (props: IFeilKort) => {
<FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={props.dato}/> <FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={props.dato}/>
</div> </div>
<FeilModal open={visModal} setOpen={setVisModal} > <FeilModal open={visModal} setOpen={setVisModal} >
<div className="flex justify-between">
<FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={new Date()} /> <FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={new Date()} />
<div className="flex gap-4 items-start">
<Button
variant="secondary"
icon={<PencilIcon/>}
>
Rediger
</Button>
<Button
icon={<XMarkIcon/>}
onClick={() => setVisModal(false)}
>
Lukk
</Button>
</div>
</div>
<div className="h-2 bg-gray-200 my-4 rounded-lg"></div> <div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
{/* TODO: HER KOMMER CONTENT */} {/* TODO: HER KOMMER CONTENT */}
</FeilModal> </FeilModal>

View file

@ -16,6 +16,7 @@ const FeilModal = (props: modalInterface) => {
aria-label={" modal"} aria-label={" modal"}
onClose={() => props.setOpen(false)} onClose={() => props.setOpen(false)}
aria-labelledby="modal-heading" aria-labelledby="modal-heading"
closeButton={false}
> >
<Modal.Content> <Modal.Content>
{props.children} {props.children}