Feilkort med dynamisk haster tag, og felles interface.ts fil

This commit is contained in:
Markus Johansen 2023-07-19 17:10:50 +02:00
parent 6906609bf5
commit f40c345bd3
3 changed files with 34 additions and 22 deletions

View file

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

View file

@ -1,24 +1,21 @@
import "@navikt/ds-css"; import "@navikt/ds-css";
import { ExpansionCard, Tag } from "@navikt/ds-react"; import { ExpansionCard, Tag } from "@navikt/ds-react";
interface feilmeldingInterface { interface TagBarInterface {
tittel: String, haster: boolean
beskrivelse: String
} }
const TagBar = () => { //typen på status er veldig wack heheheh, må fjerne any etterhvert men String fungerer ikke
const TagBar = (props: TagBarInterface) => {
return ( return (
<div className="flex gap-8 mt-4"> <div className="flex gap-8 mt-4">
<Tag variant="info">Jobbes med</Tag> <Tag variant="info">Jobbes med</Tag>
<div className="flex gap-2"> {props.haster === true ? <Tag variant="warning">Haster</Tag> : <></>}
<Tag variant="neutral">Spleiselaget</Tag>
<Tag variant="warning">Haster</Tag>
</div>
</div> </div>
) )
} }
const FeilCard = (props: feilmeldingInterface) => { const FeilCard = (props: Feilmelding) => {
return ( return (
<ExpansionCard aria-label="tekst"> <ExpansionCard aria-label="tekst">
<ExpansionCard.Header> <ExpansionCard.Header>
@ -26,7 +23,7 @@ const FeilCard = (props: feilmeldingInterface) => {
<ExpansionCard.Description> <ExpansionCard.Description>
{props.beskrivelse} {props.beskrivelse}
</ExpansionCard.Description> </ExpansionCard.Description>
<TagBar /> <TagBar haster={props.haster}/>
</ExpansionCard.Header> </ExpansionCard.Header>
<ExpansionCard.Content> <ExpansionCard.Content>
Hællæ Hællæ

10
frontend/src/interface.ts Normal file
View file

@ -0,0 +1,10 @@
/*
* I denne filen kan vi legge interfaces som skal brukes over flere steder!
*/
interface Feilmelding {
tittel: String,
beskrivelse: String
haster: boolean
}