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

✨ Feilkort som ikke er expansioncards

Browse source
This commit is contained in:
Markus Johansen 2023-07-28 16:31:36 +02:00
parent dee55dbeff
commit 0294af28d4
2 changed files with 43 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/CardsContainer.tsx
View file

@ -1,4 +1,4 @@
import FeilCard from "./FeilCard"; import { FeilCard } from "./FeilCard";
import { Feilmelding } from "../interface.ts"; import { Feilmelding } from "../interface.ts";
interface ICardsContainer { interface ICardsContainer {
@ -12,7 +12,15 @@ interface ICardsContainer {
const CardsContainer = (props: ICardsContainer) => { const CardsContainer = (props: ICardsContainer) => {
return ( return (
<div> <div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-6">
{/* {props.feilmeldinger.map((feilMelding) => (
<FeilCard1
key={props.feilmeldinger.indexOf(feilMelding)}
tittel={feilMelding.tittel}
beskrivelse={feilMelding.beskrivelse}
dato={new Date()}
/>
))} */}
{props.feilmeldinger.map((feilMelding) => ( {props.feilmeldinger.map((feilMelding) => (
<FeilCard <FeilCard
key={props.feilmeldinger.indexOf(feilMelding)} key={props.feilmeldinger.indexOf(feilMelding)}

50
frontend/src/components/FeilCard.tsx
View file

@ -1,5 +1,5 @@
import "@navikt/ds-css"; import "@navikt/ds-css";
import { ExpansionCard, Tag } from "@navikt/ds-react"; import { Heading, Tag } from "@navikt/ds-react";
import { IFeilmelding } from "../interface"; import { IFeilmelding } from "../interface";
interface TagBarInterface { interface TagBarInterface {
@ -16,21 +16,37 @@ const TagBar = (props: TagBarInterface) => {
) )
} }
const FeilCard = (props: IFeilmelding) => { // const FeilCard1 = (props: IFeilmelding) => {
return ( // return (
<ExpansionCard aria-label="tekst"> // <ExpansionCard aria-label="tekst">
<ExpansionCard.Header> // <ExpansionCard.Header>
<ExpansionCard.Title>{props.tittel}</ExpansionCard.Title> // <ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
<ExpansionCard.Description> // <ExpansionCard.Description>
{props.beskrivelse} // {props.beskrivelse}
</ExpansionCard.Description> // </ExpansionCard.Description>
<TagBar haster={true}/> // <TagBar haster={true}/>
</ExpansionCard.Header> // </ExpansionCard.Header>
<ExpansionCard.Content> // <ExpansionCard.Content>
Hællæ // Hællæ
</ExpansionCard.Content> // </ExpansionCard.Content>
</ExpansionCard> // </ExpansionCard>
// )
// }
// export default FeilCard1;
export const FeilCard = (props: IFeilmelding) => {
return(
<div className="
bg-bg-default border border-border-default p-7 rounded-lg
flex justify-between flex-col
hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
active:bg-surface-active
">
<div>
<Heading size="medium">{props.tittel}</Heading>
<p>{props.beskrivelse}</p>
</div>
<TagBar haster={false}/>
</div>
) )
} }
export default FeilCard;