show some featured images

web/src/components/events/EventItem.tsx

@@ -1,11 +1,23 @@
 import { EventFragment } from "@/gql/graphql";
 import styles from "./eventItem.module.scss";
 import Link from "next/link";
+import Image from "../general/Image";
 
 export const EventItem = ({ event }: { event: EventFragment }) => {
   return (
     <li className={`${styles.eventItem} linkItem`}>
-      <div className={styles.image}></div>
+      <div className={styles.image}>
+        {event.featuredImage && (
+          <Image
+            src={event.featuredImage.url}
+            alt=""
+            width={0}
+            height={0}
+            sizes="20vw"
+            // style={{ width: '100%', height: 'auto' }} // optional
+          />
+        )}
+      </div>
       <div className={styles.text}>
         <h1 className={styles.title}>{event.title}</h1>
         <p className={styles.details}>Detaljer og tidspunkt</p>

web/src/components/events/eventItem.module.scss

@@ -5,8 +5,14 @@
 
 .image {
   width: 100%;
-  padding-top: 60%;
+  height: auto;
+  // padding-top: 60%;
   background: var(--color-neufPink);
+
+  img {
+    width: 100%;
+    height: auto;
+  }
 }
 
 .text {
@@ -20,4 +26,4 @@
 
 .details {
   font-family: var(--font-serif);
-}
+}

web/src/components/general/Image.tsx

@@ -0,0 +1,7 @@
+import NextImage, { ImageProps as NextImageProps } from "next/image";
+
+type ImageProps = NextImageProps;
+
+export default function Image(props: ImageProps) {
+  return <NextImage {...props} />;
+}