add reusable ImageFigure component

web/src/components/blocks/ImageWithTextBlock.tsx

@@ -1,26 +1,20 @@
 import { ImageWithTextBlock as ImageWithTextBlockType } from "@/gql/graphql";
-import Image from "../general/Image";
-import styles from "./imageWithTextBlock.module.scss";
+import { ImageFigure } from "@/components/general/Image";
 
-export const ImageWithTextBlock = ({
+export function ImageWithTextBlock({
   block,
 }: {
   block: ImageWithTextBlockType;
-}) => {
+}) {
   return (
-    <figure
-      className={`${styles.imageWithTextBlock} ${styles[block.imageFormat]}`}
-    >
-      <Image
-        src={block.image.url}
-        alt={block.image.alt ?? ""}
-        width={block.image.width}
-        height={block.image.height}
-        // width={0}
-        // height={0}
-        // sizes="20vw"
-      />
-      {block.text && <figcaption>{block.text}</figcaption>}
-    </figure>
+    <ImageFigure
+      src={block.image.url}
+      alt={block.image.alt ?? ""}
+      width={block.image.width}
+      height={block.image.height}
+      attribution={block.image.attribution}
+      caption={block.text}
+      imageFormat={block.imageFormat}
+    />
   );
-};
+}