84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
"use client"
|
|
import { useRouter } from "next/navigation"
|
|
|
|
import { Button } from "@scandic-hotels/design-system/current"
|
|
|
|
import Image from "@/components/Image"
|
|
import JsonToHtml from "@/components/JsonToHtml"
|
|
|
|
import { renderOptions } from "./renderOptions"
|
|
|
|
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) {
|
|
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 || 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>
|
|
)
|
|
}
|
|
}
|