✨ Feilkort som ikke er expansioncards

frontend/src/components/CardsContainer.tsx

@@ -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)}

frontend/src/components/FeilCard.tsx

@@ -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) => {
+// 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(
-        <ExpansionCard aria-label="tekst">
+        <div className="
-            <ExpansionCard.Header>
+            bg-bg-default border border-border-default p-7 rounded-lg 
-                <ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
+            flex justify-between flex-col
-                <ExpansionCard.Description>
+            hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
-                    {props.beskrivelse}
+            active:bg-surface-active
-                </ExpansionCard.Description>
+            ">
-                <TagBar haster={true}/>
+            <div>
-            </ExpansionCard.Header>
+                <Heading size="medium">{props.tittel}</Heading>
-            <ExpansionCard.Content>
+                <p>{props.beskrivelse}</p>       
-                Hællæ
+            </div>
-            </ExpansionCard.Content>
+            <TagBar haster={false}/>
-        </ExpansionCard>
+        </div>
     )
 }
-
-export default FeilCard;