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

Official React Components library to render a dotCMS page.

import { jsx } from 'react/jsx-runtime';
import { combineClasses, DOT_SECTION_ID_PREFIX } from '@dotcms/uve/internal';
import styles from './Row.module.css.esm.js';
import { Column } from '../Column/Column.esm.js';

/**
 * This component renders a row with all it's content using the layout provided by dotCMS Page API.
 *
 * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
 * @category Components
 * @param {React.ForwardedRef<HTMLDivElement, DotCMS>} ref
 * @return {JSX.Element} Rendered rows with columns
 */
const Row = ({
  row,
  index
}) => {
  const customRowClass = combineClasses(['dot-row-container', row.styleClass || '']);
  return jsx("div", {
    id: `${DOT_SECTION_ID_PREFIX}${index}`,
    className: customRowClass,
    children: jsx("div", {
      className: styles.row,
      "data-dot-object": 'row',
      children: row.columns.map((column, index) => jsx(Column, {
        column: column
      }, index))
    })
  });
};

export { Row };