57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import { cx } from 'class-variance-authority'
|
|
|
|
import { nodesToHtml } from './utils'
|
|
|
|
import styles from './jsontohtml.module.css'
|
|
|
|
import { ImageVaultAsset } from '@scandic-hotels/common/utils/imageVault'
|
|
import { ContentBlockType } from './types/rte/enums'
|
|
import type { RTENode } from './types/rte/node'
|
|
import type { RenderOptions } from './types/rte/option'
|
|
|
|
export type Node<T> = {
|
|
node: T
|
|
}
|
|
|
|
export type Embeds =
|
|
| {
|
|
__typename: Exclude<ContentBlockType, 'ImageContainer'>
|
|
system?: { uid: string } | undefined | null
|
|
url?: string | undefined | null
|
|
title?: string | undefined | null
|
|
}
|
|
| {
|
|
__typename: 'ImageContainer'
|
|
system?: { uid: string } | null
|
|
url?: string | null
|
|
title?: string | null
|
|
image_left?: ImageVaultAsset
|
|
image_right?: ImageVaultAsset
|
|
}
|
|
|
|
export type EmbedByUid = Record<string, Node<Embeds>>
|
|
|
|
export type JsonToHtmlProps = {
|
|
embeds: Node<Embeds>[]
|
|
nodes: RTENode[]
|
|
renderOptions?: RenderOptions
|
|
className?: string
|
|
}
|
|
|
|
export function JsonToHtml({
|
|
embeds,
|
|
nodes,
|
|
renderOptions = {},
|
|
className,
|
|
}: JsonToHtmlProps) {
|
|
if (!Array.isArray(nodes) || !nodes.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className={cx(styles.container, className)}>
|
|
{nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
|
|
</section>
|
|
)
|
|
}
|