Files
payloadcms/examples/form-builder/next-app/components/Blocks/index.tsx
Paul d053778bf2 chore: update form builder example (#6376)
Updates the form builder example
2024-05-15 21:22:54 -03:00

52 lines
1.3 KiB
TypeScript

import React, { Fragment } from 'react'
import type { Page } from '../../payload-types'
import { toKebabCase } from '../../utilities/toKebabCase'
import { VerticalPadding } from '../VerticalPadding'
import { FormBlock } from './Form'
const blockComponents = {
formBlock: FormBlock,
}
const Blocks: React.FC<{
blocks: Page['layout']
}> = (props) => {
const { blocks } = props
const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
if (hasBlocks) {
return (
<Fragment>
{blocks.map((block, index) => {
const { blockName, blockType, form } = block
const isFormBlock = blockType === 'formBlock'
{
/*@ts-expect-error*/
}
const formID: string = isFormBlock && form && (typeof form === 'string' ? form : form.id)
if (blockType && blockType in blockComponents) {
const Block = blockComponents[blockType]
return (
<VerticalPadding bottom="small" key={isFormBlock ? formID : index} top="small">
{/*@ts-expect-error*/}
<Block id={toKebabCase(blockName)} {...block} />
</VerticalPadding>
)
}
return null
})}
</Fragment>
)
}
return null
}
export default Blocks