web: start using graphql-codegen, switch to urql, use graphql data a few places

web/src/components/events/EventItem.tsx

@@ -1,13 +1,17 @@
+import { EventFragment } from "@/gql/graphql";
 import styles from "./eventItem.module.scss";
+import Link from "next/link";
 
-export const EventItem = () => {
+export const EventItem = ({ event }: { event: EventFragment }) => {
   return (
-    <li className={`${styles.eventItem} linkItem`}>
-      <div className={styles.image}></div>
-      <div className={styles.text}>
-        <h1 className={styles.title}>Arrangementstittel</h1>
-        <p className={styles.details}>Detaljer og tidspunkt</p>
-      </div>
-    </li>
+    <Link href={`/arrangementer/${event.slug}`}>
+      <li className={`${styles.eventItem} linkItem`}>
+        <div className={styles.image}></div>
+        <div className={styles.text}>
+          <h1 className={styles.title}>{event.title}</h1>
+          <p className={styles.details}>Detaljer og tidspunkt</p>
+        </div>
+      </li>
+    </Link>
   );
 };

web/src/components/events/EventList.tsx

@@ -1,13 +1,13 @@
+import { EventFragment } from "@/gql/graphql";
 import { EventItem } from "./EventItem";
 import styles from "./eventList.module.scss";
 
-export const EventList = () => {
+export const EventList = ({ events }: { events: EventFragment[] }) => {
   return (
     <ul className={styles.eventList}>
-      <EventItem />
-      <EventItem />
-      <EventItem />
-      <EventItem />
+      {events.map((event) => (
+        <EventItem key={event.id} event={event} />
+      ))}
     </ul>
   );
 };