add reusable ImageFigure component

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">