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

Official React Components library to render a dotCMS page.

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

/**
 * @internal
 *
 * Renders a Column component that represents a single column in a 12-column grid system.
 * The column's position and width are determined by the leftOffset and width properties
 * from the dotCMS Page API. Uses CSS Grid classes for positioning.
 *
 * @example
 * ```tsx
 * <Column column={{
 *   leftOffset: 0,
 *   width: 6,
 *   styleClass: "custom-class",
 *   containers: []
 * }} />
 * ```
 *
 * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
 * @export
 * @param {ColumnProps} { column } - Column configuration object
 * @return {JSX.Element} Rendered column with its containers positioned in the grid
 */
function Column({
  column
}) {
  const {
    startClass,
    endClass
  } = getColumnPositionClasses(column);
  const combinedClasses = combineClasses([styles[endClass], styles[startClass]]);
  return jsx("div", {
    "data-dot": "column",
    className: combinedClasses,
    children: jsx("div", {
      className: column.styleClass,
      children: column.containers.map(container => jsx(Container, {
        container: container
      }, `${container.identifier}-${container.uuid}`))
    })
  });
}

export { Column };