feat: add button to puff

components/Current/Aside/Puff/index.tsx

@@ -1,4 +1,6 @@
+"use client"
 import { renderOptions } from "./renderOptions"
+import { useRouter } from "next/navigation"
 
 import Image from "@/components/Image"
 import JsonToHtml from "@/components/JsonToHtml"
@@ -7,38 +9,73 @@ import { Button } from "@scandic-hotels/design-system"
 import styles from "./puff.module.css"
 
 import type { PuffProps } from "@/types/components/current/asides/puff"
+import { PuffStyleEnum } from "@/types/requests/puff"
 
 export default function Puff({
   imageConnection,
   link,
   text,
+  puff_style,
   title,
 }: PuffProps) {
-  return (
-    <a className={styles.link} href={link.href}>
-      <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}
-            width={image.node.dimension.width}
-          />
-        ))}
-        <section className={styles.content}>
-          <Button>Hej!</Button>
-          <header>
-            <h3 className={styles.heading}>{title}</h3>
-          </header>
-          <JsonToHtml
-            embeds={[]}
-            nodes={text.json.children}
-            renderOptions={renderOptions}
-          />
-        </section>
-      </article>
-    </a>
-  )
+  const router = useRouter()
+
+  switch (puff_style) {
+    case PuffStyleEnum.button:
+      function onClick() {
+        router.push(link.href)
+      }
+
+      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}
+              width={image.node.dimension.width}
+            />
+          ))}
+          <section className={styles.content}>
+            <JsonToHtml
+              embeds={[]}
+              nodes={text.json.children}
+              renderOptions={renderOptions}
+            />
+            <div>
+              <Button onPress={onClick}>{link.title}</Button>
+            </div>
+          </section>
+        </article>
+      )
+    case PuffStyleEnum.default:
+      return (
+        <a className={styles.link} href={link.href}>
+          <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}
+                width={image.node.dimension.width}
+              />
+            ))}
+            <section className={styles.content}>
+              <header>
+                <h3 className={styles.heading}>{title}</h3>
+              </header>
+              <JsonToHtml
+                embeds={[]}
+                nodes={text.json.children}
+                renderOptions={renderOptions}
+              />
+            </section>
+          </article>
+        </a>
+      )
+  }
 }

components/Current/Aside/Puff/puff.module.css

@@ -16,8 +16,10 @@
 }
 
 .content {
+  display: grid;
   padding: 10px;
   background-color: #fff;
+  gap: 27px;
 }
 
 .heading {
@@ -38,7 +40,6 @@
   color: #333;
   line-height: 1.3;
   margin-bottom: 0;
-  padding-top: 7px;
   text-decoration: none;
 }