@dotcms/react/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.esm.js

Official React Components library to render a dotCMS page.

import { jsx } from 'react/jsx-runtime';
import { ErrorMessage } from './components/ErrorMessage.esm.js';
import { DotCMSPageProvider } from './DotCMSPageProvider.esm.js';
import { Row } from '../Row/Row.esm.js';

/**
 * DotCMSLayoutBody component renders the layout body for a DotCMS page.
 *
 * It utilizes the dotCMS page asset's layout body to render the page body.
 * If the layout body does not exist, it renders an error message in the mode is `development`.
 *
 * @public
 * @component
 * @param {Object} props - Component properties.
 * @param {DotCMSPageAsset} props.page - The DotCMS page asset containing the layout information.
 * @param {Record<string, React.ComponentType<DotCMSContentlet>>} [props.components] - mapping of custom components for content rendering.
 * @param {DotCMSPageRendererMode} [props.mode='production'] - The renderer mode; defaults to 'production'. Alternate modes might trigger different behaviors.
 * @param {Record<string, ReactNode>} [props.slots] - Pre-rendered server component nodes keyed by contentlet identifier.
 *
 * @returns {JSX.Element} The rendered DotCMS page body or an error message if the layout body is missing.
 *
 */
const DotCMSLayoutBody = ({
  page,
  components: _components = {},
  mode: _mode = 'production',
  slots: _slots = {}
}) => {
  var _page$layout;
  const dotCMSPageBody = page == null || (_page$layout = page.layout) == null ? void 0 : _page$layout.body;
  return jsx(DotCMSPageProvider, {
    page: page,
    components: _components,
    mode: _mode,
    slots: _slots,
    children: dotCMSPageBody ? dotCMSPageBody.rows.map((row, index) => jsx(Row, {
      index: index + 1,
      row: row
    }, index)) : jsx(ErrorMessage, {})
  });
};

export { DotCMSLayoutBody };