💄 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:
parent
a9c267e309
commit
02178d187f
2 changed files with 22 additions and 2 deletions
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Reference in a new issue