@dotcms/react/lib/next/components/Container/ContainerFallbacks.esm.js

Official React Components library to render a dotCMS page.

"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useEffect } from 'react';
import { EMPTY_CONTAINER_STYLE_REACT } from '@dotcms/uve/internal';
import { useIsDevMode } from '../../hooks/useIsDevMode.esm.js';

/**
 * @internal
 *
 * Component to display when a container is not found in the system.
 * Only renders in development mode for debugging purposes.
 *
 * @component
 * @param {Object} props - Component properties
 * @param {string} props.identifier - Container identifier
 * @returns {JSX.Element | null} Message about missing container or null in production
 */
const ContainerNotFound = ({
  identifier
}) => {
  const isDevMode = useIsDevMode();
  useEffect(() => {
    if (!isDevMode) {
      return;
    }
    console.error(`Container with identifier ${identifier} not found`);
  }, [identifier, isDevMode]);
  if (!isDevMode) {
    return null;
  }
  return jsxs("div", {
    "data-testid": "container-not-found",
    style: EMPTY_CONTAINER_STYLE_REACT,
    children: ["This container with identifier ", identifier, " was not found."]
  });
};
/**
 * @internal
 *
 * Component to display when a container is empty.
 *
 * @param {DotContainerAttributes} dotAttributes
 * @return {*}
 */
const EmptyContainer = dotAttributes => {
  const isDevMode = useIsDevMode();
  if (!isDevMode) {
    return null;
  }
  return jsx("div", Object.assign({}, dotAttributes, {
    style: EMPTY_CONTAINER_STYLE_REACT,
    children: jsx("span", {
      "data-testid": "empty-container-message",
      "data-dot-object": "empty-content",
      children: "This container is empty."
    })
  }));
};

export { ContainerNotFound, EmptyContainer };