From ada7d2508381bae4ee7cddecd8effef97faddc10 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Sun, 7 Jul 2024 17:43:19 +0200
Subject: [PATCH] add reusable ImageFigure component

---
 web/src/app/aktuelt/[slug]/page.tsx           | 22 ++++++-------
 web/src/app/foreninger/[slug]/page.tsx        |  2 +-
 web/src/app/lokaler/[slug]/page.tsx           |  2 +-
 .../associations/AssociationItem.tsx          |  2 +-
 web/src/components/blocks/FeaturedBlock.tsx   |  2 +-
 .../components/blocks/HorizontalRuleBlock.tsx |  2 +-
 .../components/blocks/ImageSliderBlock.tsx    | 24 +++++++-------
 .../components/blocks/ImageWithTextBlock.tsx  | 32 ++++++++-----------
 web/src/components/events/EventHeader.tsx     |  4 ++-
 web/src/components/events/EventItem.tsx       |  2 +-
 web/src/components/general/Image.tsx          | 22 +++++++++++--
 .../image.module.scss}                        |  6 +++-
 web/src/components/news/NewsItem.tsx          |  2 +-
 web/src/components/venues/VenueInfo.tsx       |  2 +-
 web/src/components/venues/VenueItem.tsx       |  2 +-
 15 files changed, 70 insertions(+), 58 deletions(-)
 rename web/src/components/{blocks/imageWithTextBlock.module.scss => general/image.module.scss} (92%)

diff --git a/web/src/app/aktuelt/[slug]/page.tsx b/web/src/app/aktuelt/[slug]/page.tsx
index 75560ef..9bb8c00 100644
--- a/web/src/app/aktuelt/[slug]/page.tsx
+++ b/web/src/app/aktuelt/[slug]/page.tsx
@@ -1,6 +1,6 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
-import Image from "@/components/general/Image";
+import { ImageFigure } from "@/components/general/Image";
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
 import { formatDate, formatExtendedDateTime } from "@/lib/date";
@@ -56,18 +56,14 @@ export default async function Page({ params }: { params: { slug: string } }) {
         </p>
         <h1 className="news-title">{news.title}</h1>
         {featuredImage && (
-          <figure key={featuredImage.id}>
-            <Image
-              src={featuredImage.url}
-              alt={featuredImage.alt ?? ""}
-              width={featuredImage.width}
-              height={featuredImage.height}
-              sizes="100vw"
-            />
-            {featuredImage.attribution && (
-              <figcaption>{featuredImage.attribution}</figcaption>
-            )}
-          </figure>
+          <ImageFigure
+            src={featuredImage.url}
+            alt={featuredImage.alt ?? ""}
+            width={featuredImage.width}
+            height={featuredImage.height}
+            attribution={featuredImage.attribution}
+            sizes="100vw"
+          />
         )}
       </section>
       <section className="pageContent">
diff --git a/web/src/app/foreninger/[slug]/page.tsx b/web/src/app/foreninger/[slug]/page.tsx
index 7422fb4..3a77ad6 100644
--- a/web/src/app/foreninger/[slug]/page.tsx
+++ b/web/src/app/foreninger/[slug]/page.tsx
@@ -1,7 +1,7 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
 import Icon from "@/components/general/Icon";
-import Image from "@/components/general/Image";
+import { Image } from "@/components/general/Image";
 import { graphql } from "@/gql";
 import { AssociationFragment } from "@/gql/graphql";
 import Link from "next/link";
diff --git a/web/src/app/lokaler/[slug]/page.tsx b/web/src/app/lokaler/[slug]/page.tsx
index c27ad28..ab17e8d 100644
--- a/web/src/app/lokaler/[slug]/page.tsx
+++ b/web/src/app/lokaler/[slug]/page.tsx
@@ -1,7 +1,7 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
 import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock";
-import Image from "@/components/general/Image";
+import { Image } from "@/components/general/Image";
 import { NeufMap } from "@/components/venues/NeufMap";
 import { VenueInfo } from "@/components/venues/VenueInfo";
 import { graphql } from "@/gql";
diff --git a/web/src/components/associations/AssociationItem.tsx b/web/src/components/associations/AssociationItem.tsx
index ba33d2f..d64305f 100644
--- a/web/src/components/associations/AssociationItem.tsx
+++ b/web/src/components/associations/AssociationItem.tsx
@@ -1,7 +1,7 @@
 import { AssociationFragment } from "@/gql/graphql";
 import styles from "./associationItem.module.scss";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 
 export const AssociationItem = ({
   association,
diff --git a/web/src/components/blocks/FeaturedBlock.tsx b/web/src/components/blocks/FeaturedBlock.tsx
index 1a90247..ca0ff5f 100644
--- a/web/src/components/blocks/FeaturedBlock.tsx
+++ b/web/src/components/blocks/FeaturedBlock.tsx
@@ -1,6 +1,6 @@
 import { FeaturedBlock as FeaturedBlockType } from "@/gql/graphql";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import styles from "./featuredBlock.module.scss";
 
 // the 'text' field has been aliased to 'featuredBlockText' and i'm
diff --git a/web/src/components/blocks/HorizontalRuleBlock.tsx b/web/src/components/blocks/HorizontalRuleBlock.tsx
index 0810705..564e55a 100644
--- a/web/src/components/blocks/HorizontalRuleBlock.tsx
+++ b/web/src/components/blocks/HorizontalRuleBlock.tsx
@@ -1,5 +1,5 @@
 import { HorizontalRuleBlock as HorizontalRuleBlockType } from "@/gql/graphql";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import styles from "./horizontalRuleBlock.module.scss";
 
 export const HorizontalRuleBlock = ({
diff --git a/web/src/components/blocks/ImageSliderBlock.tsx b/web/src/components/blocks/ImageSliderBlock.tsx
index 8e6b66f..bd36d67 100644
--- a/web/src/components/blocks/ImageSliderBlock.tsx
+++ b/web/src/components/blocks/ImageSliderBlock.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { ImageSliderBlock as ImageSliderBlockType } from "@/gql/graphql";
-import Image from "../general/Image";
+import { ImageFigure } from "@/components/general/Image";
 import styles from "./imageSliderBlock.module.scss";
 
 // import swiper modules & styles
@@ -31,18 +31,16 @@ export const ImageSliderBlock = ({
         {block.images &&
           block.images.map((imageItem: any, index: number) => (
             <SwiperSlide key={index}>
-              <figure key={imageItem.image.id}>
-                <Image
-                  src={imageItem.image.url}
-                  alt={imageItem.image.alt ?? ""}
-                  width={imageItem.image.width}
-                  height={imageItem.image.height}
-                  // width={0}
-                  // height={0}
-                  // sizes="20vw"
-                />
-                {imageItem.text && <figcaption>{imageItem.text}</figcaption>}
-              </figure>
+              <ImageFigure
+                key={imageItem.image.id}
+                src={imageItem.image.url}
+                alt={imageItem.image.alt ?? ""}
+                width={imageItem.image.width}
+                height={imageItem.image.height}
+                attribution={imageItem.image.attribution}
+                caption={imageItem.text}
+                sizes="100vw"
+              />
             </SwiperSlide>
           ))}
       </Swiper>
diff --git a/web/src/components/blocks/ImageWithTextBlock.tsx b/web/src/components/blocks/ImageWithTextBlock.tsx
index 4b7190d..bb0d747 100644
--- a/web/src/components/blocks/ImageWithTextBlock.tsx
+++ b/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}
+    />
   );
-};
+}
diff --git a/web/src/components/events/EventHeader.tsx b/web/src/components/events/EventHeader.tsx
index 2fda03e..e7cf0a8 100644
--- a/web/src/components/events/EventHeader.tsx
+++ b/web/src/components/events/EventHeader.tsx
@@ -1,6 +1,6 @@
 import { EventFragment } from "@/lib/event";
 import styles from "./eventHeader.module.scss";
-import Image from "@/components/general/Image";
+import { Image } from "@/components/general/Image";
 import Link from "next/link";
 import { OrganizerList } from "./OrganizerList";
 import Icon from "../general/Icon";
@@ -17,6 +17,8 @@ function formatPrice(price: number): string {
 }
 
 export const EventHeader = ({ event }: { event: EventFragment }) => {
+  // TODO: where should we show image attribution for the featured image?
+
   const featuredImage: any = event.featuredImage;
 
   return (
diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx
index e3f9d12..01a8b05 100644
--- a/web/src/components/events/EventItem.tsx
+++ b/web/src/components/events/EventItem.tsx
@@ -2,7 +2,7 @@
 
 import styles from "./eventItem.module.scss";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import {
   SingularEvent,
   EventFragment,
diff --git a/web/src/components/general/Image.tsx b/web/src/components/general/Image.tsx
index 8ad7516..7ee51a3 100644
--- a/web/src/components/general/Image.tsx
+++ b/web/src/components/general/Image.tsx
@@ -1,7 +1,25 @@
 import NextImage, { ImageProps as NextImageProps } from "next/image";
+import styles from "./image.module.scss";
 
-type ImageProps = NextImageProps;
+type ImageProps = NextImageProps & {
+  attribution?: string | null;
+  caption?: string | null;
+  imageFormat?: string | null; // "original" | "bleed" | "fullWidth"
+};
 
-export default function Image(props: ImageProps) {
+export function ImageFigure(props: ImageProps) {
+  const { attribution, caption, imageFormat, ...nextImageProps } = props;
+  return (
+    <figure
+      className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
+    >
+      <NextImage {...nextImageProps} />
+      {attribution && <div className={styles.attribution}>{attribution}</div>}
+      {caption && <figcaption>{caption}</figcaption>}
+    </figure>
+  );
+}
+
+export function Image(props: NextImageProps) {
   return <NextImage {...props} />;
 }
diff --git a/web/src/components/blocks/imageWithTextBlock.module.scss b/web/src/components/general/image.module.scss
similarity index 92%
rename from web/src/components/blocks/imageWithTextBlock.module.scss
rename to web/src/components/general/image.module.scss
index 2d4f677..4b4eff7 100644
--- a/web/src/components/blocks/imageWithTextBlock.module.scss
+++ b/web/src/components/general/image.module.scss
@@ -1,4 +1,4 @@
-.imageWithTextBlock {
+.image {
   width: 100%;
   margin: 0;
 
@@ -52,4 +52,8 @@
       text-align: left;
     }
   }
+}
+
+.attribution {
+  border: 1px dotted mediumpurple;
 }
\ No newline at end of file
diff --git a/web/src/components/news/NewsItem.tsx b/web/src/components/news/NewsItem.tsx
index 1bd130b..286cfbd 100644
--- a/web/src/components/news/NewsItem.tsx
+++ b/web/src/components/news/NewsItem.tsx
@@ -1,5 +1,5 @@
 import styles from "./newsItem.module.scss";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import { NewsFragment } from "@/lib/news";
 import { formatDate } from "@/lib/date";
 import Link from "next/link";
diff --git a/web/src/components/venues/VenueInfo.tsx b/web/src/components/venues/VenueInfo.tsx
index a1e0bbb..7ac40a6 100644
--- a/web/src/components/venues/VenueInfo.tsx
+++ b/web/src/components/venues/VenueInfo.tsx
@@ -1,7 +1,7 @@
 import { VenueFragment } from "@/gql/graphql";
 import styles from "./venueInfo.module.scss";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import Icon from "../general/Icon";
 
 export const VenueInfo = ({ venue }: { venue: VenueFragment }) => {
diff --git a/web/src/components/venues/VenueItem.tsx b/web/src/components/venues/VenueItem.tsx
index b73faa9..166798a 100644
--- a/web/src/components/venues/VenueItem.tsx
+++ b/web/src/components/venues/VenueItem.tsx
@@ -1,7 +1,7 @@
 import { VenueFragment } from "@/gql/graphql";
 import styles from "./venueItem.module.scss";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 
 export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
   const featuredImage: any = venue.featuredImage;