add image-and-text and image slider block types

web/src/components/blocks/Blocks.tsx

@@ -1,4 +1,6 @@
 import { RichTextBlock } from "./RichTextBlock";
+import { ImageWithTextBlock } from "./ImageWithTextBlock";
+import { ImageSliderBlock } from "./ImageSliderBlock";
 
 export const Blocks = ({ blocks }: any) => {
   return blocks.map((block: any) => {
@@ -6,6 +8,12 @@ export const Blocks = ({ blocks }: any) => {
       case "RichTextBlock":
         return <RichTextBlock block={block} />;
         break;
+      case "ImageWithTextBlock":
+        return <ImageWithTextBlock block={block} />;
+        break;
+      case "ImageSliderBlock":
+        return <ImageSliderBlock block={block} />;
+        break;
       default:
         return <div>Unsupported block type {block.blockType}</div>;
         console.log("unsupported block", block);

web/src/components/blocks/ImageSliderBlock.tsx

@@ -0,0 +1,21 @@
+import { ImageSliderBlock as ImageSliderBlockType } from "@/gql/graphql";
+import Image from "../general/Image";
+import styles from "./imageSliderBlock.module.scss";
+
+export const ImageSliderBlock = ({
+  block,
+}: {
+  block: ImageSliderBlockType;
+}) => {
+  return (
+    <div className={styles.imageSliderBlock}>
+      {block.images &&
+        block.images.map((imageItem: any) => (
+          <div key={imageItem.image.id}>
+            <div>{imageItem.image.url}</div>
+            <div>{imageItem.text}</div>
+          </div>
+        ))}
+    </div>
+  );
+};

web/src/components/blocks/ImageWithTextBlock.tsx

@@ -0,0 +1,25 @@
+import { ImageWithTextBlock as ImageWithTextBlockType } from "@/gql/graphql";
+import Image from "../general/Image";
+import styles from "./imageWithTextBlock.module.scss";
+
+export const ImageWithTextBlock = ({
+  block,
+}: {
+  block: ImageWithTextBlockType;
+}) => {
+  return (
+    <div className={styles.imageWithTextBlock}>
+      <Image
+        src={block.image.url}
+        alt={block.image.alt ?? ""}
+        width={block.image.width}
+        height={block.image.height}
+        // width={0}
+        // height={0}
+        // sizes="20vw"
+      />
+      <div>{block.imageFormat}</div>
+      {block.text && <div>{block.text}</div>}
+    </div>
+  );
+};

web/src/components/events/EventHeader.tsx

@@ -5,6 +5,8 @@ import { Pig } from "../general/Pig";
 import Link from "next/link";
 
 export const EventHeader = ({ event }: { event: EventFragment }) => {
+  const featuredImage: any = event.featuredImage
+
   return (
     <div className={styles.eventHeader}>
       <div className={styles.text}>
@@ -61,12 +63,12 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
         </div>
       </div>
       <div className={styles.image}>
-        {event.featuredImage && (
+        {featuredImage && (
           <Image
-            src={event.featuredImage.url}
-            alt={event.featuredImage.alt}
-            width={event.featuredImage.width}
-            height={event.featuredImage.height}
+            src={featuredImage.url}
+            alt={featuredImage.alt}
+            width={featuredImage.width}
+            height={featuredImage.height}
             sizes="100vw"
           />
         )}

web/src/components/events/EventItem.tsx

@@ -21,6 +21,7 @@ export const EventItem = ({
 }) => {
   const nextOccurrence = getClosestOccurrence(event);
   const numOccurrences = event?.occurrences?.length ?? 0;
+  const featuredImage: any = event.featuredImage;
 
   return (
     <li
@@ -29,10 +30,10 @@ export const EventItem = ({
       } linkItem`}
     >
       <div className={styles.image}>
-        {event.featuredImage && (
+        {featuredImage && (
           <Image
-            src={event.featuredImage.url}
-            alt={event.featuredImage.alt}
+            src={featuredImage.url}
+            alt={featuredImage.alt}
             width={0}
             height={0}
             sizes="20vw"

web/src/components/venues/VenueItem.tsx

@@ -4,13 +4,15 @@ import Link from "next/link";
 import Image from "../general/Image";
 
 export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
+  const featuredImage: any = venue.featuredImage;
+
   return (
     <li className={`${styles.venueItem} linkItem`}>
       <div className={styles.image}>
-        {venue.featuredImage && (
+        {featuredImage && (
           <Image
-            src={venue.featuredImage.url}
-            alt={venue.featuredImage.alt}
+            src={featuredImage.url}
+            alt={featuredImage.alt}
             width={0}
             height={0}
             sizes="20vw"