fix: move puffs map to own container

components/Current/Asides/Puffs/Puff/index.tsx

@@ -0,0 +1,67 @@
+import { renderOptions } from "./renderOptions"
+
+import Image from "next/image"
+import JsonToHtml from "@/components/JsonToHtml"
+import Link from "next/link"
+
+import styles from "./puff.module.css"
+
+import type { PuffProps } from "@/types/components/current/asides/puff"
+
+export default function Puff({ imageConnection, is_internal, link, pageConnection, text, title }: PuffProps) {
+  if (is_internal) {
+    const page = pageConnection.edges[0]
+    if (!page?.node?.url) {
+      return null
+    }
+    return (
+      <Link className={styles.link} href={page.node.url}>
+        <PuffContent
+          imageConnection={imageConnection}
+          text={text}
+          title={title}
+        />
+      </Link>
+    )
+  }
+  return (
+    <a className={styles.link} href={link.href} target="_blank">
+      <PuffContent
+        imageConnection={imageConnection}
+        text={text}
+        title={title}
+      />
+    </a>
+  )
+}
+
+
+function PuffContent({ imageConnection, text, title }: Pick<PuffProps, "imageConnection" | "text" | "title">) {
+  return (
+    <article>
+      {imageConnection.edges.map(image => (
+        <Image
+          alt={image.node.title}
+          className={styles.image}
+          height={image.node.dimension.height}
+          key={image.node.system.uid}
+          src={image.node.url}
+          unoptimized
+          width={image.node.dimension.width}
+        />
+      ))}
+      <section className={styles.content}>
+        <header className="content-teaser__body-wrapper">
+          <h3 className={styles.heading}>
+            {title}
+          </h3>
+        </header>
+        <JsonToHtml
+          embeds={text.embedded_itemsConnection.edges}
+          nodes={text.json.children}
+          renderOptions={renderOptions}
+        />
+      </section>
+    </article>
+  )
+}