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