Content Renderer

1import type { ProcessedDocumentNode } from '@contentbit/core'
2import type { ReactNode } from 'react'
3 
4import { genericBlockDefinitions } from '@contentbit/blocks'
5import { ContentBlocks, defineBlockComponents, type BlockComponent } from '@contentbit/react'
6 
7import { CalloutBlock } from './callout'
8import { ComparisonBlock } from './comparison'
9import { FaqBlock } from './faq'
10import { KeyMetricsBlock } from './key-metrics'
11import { ProsConsBlock } from './pros-cons'
12import { QuickRefBlock } from './quick-ref'
13import { StepsBlock } from './steps'
14import { TabsBlock } from './tabs-block'
15 
16export const styledComponents = defineBlockComponents(genericBlockDefinitions, {
17  callout: CalloutBlock,
18  steps: StepsBlock,
19  'key-metrics': KeyMetricsBlock,
20  'quick-ref': QuickRefBlock,
21  comparison: ComparisonBlock,
22  'pros-cons': ProsConsBlock,
23  tabs: TabsBlock,
24  faq: FaqBlock,
25})
26 
27export interface ContentRendererProps {
28  document: ProcessedDocumentNode
29  /** Plug your app's Markdown pipeline here. Defaults to plain paragraphs. */
30  renderMarkdown?: (md: string) => ReactNode
31  components?: Record<string, BlockComponent>
32}
33 
34export function ContentRenderer({ document, renderMarkdown, components }: ContentRendererProps) {
35  return (
36    <ContentBlocks
37      document={document}
38      components={{ ...styledComponents, ...components }}
39      renderMarkdown={renderMarkdown}
40    />
41  )
42}