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
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";
interface ICardsContainer {
@ -12,7 +12,15 @@ interface ICardsContainer {
const CardsContainer = (props: ICardsContainer) => {
return (
<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) => (
<FeilCard
key={props.feilmeldinger.indexOf(feilMelding)}

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

@ -1,5 +1,5 @@
import "@navikt/ds-css";
import { ExpansionCard, Tag } from "@navikt/ds-react";
import { Heading, Tag } from "@navikt/ds-react";
import { IFeilmelding } from "../interface";
interface TagBarInterface {
@ -16,21 +16,37 @@ const TagBar = (props: TagBarInterface) => {
)
}
const FeilCard = (props: IFeilmelding) => {
return (
<ExpansionCard aria-label="tekst">
<ExpansionCard.Header>
<ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
<ExpansionCard.Description>
{props.beskrivelse}
</ExpansionCard.Description>
<TagBar haster={true}/>
</ExpansionCard.Header>
<ExpansionCard.Content>
Hællæ
</ExpansionCard.Content>
</ExpansionCard>
// const FeilCard1 = (props: IFeilmelding) => {
// return (
// <ExpansionCard aria-label="tekst">
// <ExpansionCard.Header>
// <ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
// <ExpansionCard.Description>
// {props.beskrivelse}
// </ExpansionCard.Description>
// <TagBar haster={true}/>
// </ExpansionCard.Header>
// <ExpansionCard.Content>
// Hællæ
// </ExpansionCard.Content>
// </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;