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

web/src/components/blocks/Blocks.tsx

@@ -0,0 +1,49 @@
+export const RichTextBlock = ({ block }: any) => {
+  return (
+    <div
+      className="rich-text-block"
+      dangerouslySetInnerHTML={{ __html: block.value }}
+    ></div>
+  );
+};
+
+export const Blocks = ({ blocks }: any) => {
+  return blocks.map((block: any) => {
+    switch (block.blockType) {
+      case "RichTextBlock":
+        return <RichTextBlock block={block} />;
+        break;
+      default:
+        return <div>Unsupported block type {block.blockType}</div>;
+        console.log("unsupported block", block);
+    }
+  });
+};
+
+/*
+StreamFieldBlock
+CharBlock
+TextBlock
+EmailBlock
+IntegerBlock
+FloatBlock
+DecimalBlock
+RegexBlock
+URLBlock
+BooleanBlock
+DateBlock
+TimeBlock
+DateTimeBlock
+RichTextBlock
+RawHTMLBlock
+BlockQuoteBlock
+ChoiceBlock
+StreamBlock
+StructBlock
+StaticBlock
+ListBlock
+EmbedBlock
+PageChooserBlock
+DocumentChooserBlock
+ImageChooserBlock
+*/

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