Container.jsx

import * as React from 'react';
import PropTypes from 'prop-types';
import { useWindowSize } from '@hooks';

function LeftContainer({ children }) {
  const { width } = useWindowSize();
  const isDesktop = width > 1023;

  return (
    <section
      style={{ height: 'min-content', maxWidth: isDesktop ? '56.45%' : 'none' }}
      className="w-full p-6 lg:min-h-full md:p-10"
    >
      <div style={{ maxWidth: isDesktop ? '513px' : 'none' }} className="ml-auto ">
        {children}
      </div>
    </section>
  );
}

function RightContainer({ children }) {
  const { width } = useWindowSize();
  const isDesktop = width > 1023;

  return (
    <aside
      style={{ height: isDesktop ? 'min-content' : '100%', maxWidth: isDesktop ? '43.55%' : 'none' }}
      className="w-full p-6 lg:min-h-full md:p-10 bg-neutral-lighter"
    >
      <div style={{ maxWidth: isDesktop ? '339px' : 'none' }} className="mr-auto ">
        {children}
      </div>
    </aside>
  );
}

export default function Container({ children }) {
  const childrens = React.Children.map(children, child => child);
  const [left, right] = childrens;
  const isCompoundComponent = childrens
    .map(child => [LeftContainer, RightContainer].includes(child.type))
    .includes(true);

  if (isCompoundComponent && childrens.length > 2) {
    throw new Error(
      `When using Container.Left or Container.Right, the Container component will only accept both at the same time. Try to fix by adding Container.Left and Container.Right:\n
      <Container>
        <Container.Left>{...}</Container.Left>
        <Container.Right>{...}</Container.Right>
      </Container>\n`,
    );
  }

  if (isCompoundComponent && (left.type !== LeftContainer || right.type !== RightContainer)) {
    throw new Error(
      `Failed when trying to use Container together with Container.Left and Container.Right. Try to fix by adding Container.Left and Container.Right:\n
      <Container>
        <Container.Left>{...}</Container.Left>
        <Container.Right>{...}</Container.Right>
      </Container>\n`,
    );
  }

  if (isCompoundComponent && left.type === LeftContainer && right.type === RightContainer) {
    return (
      <main style={{ overflowY: 'auto' }} className="flex flex-col w-full h-full mx-auto lg:flex-row">
        {children}
      </main>
    );
  }

  return (
    <main style={{ overflowY: 'auto' }} className="w-full h-full bg-neutral-lighter">
      <div style={{ maxWidth: '932px' }} className="px-6 py-6 mx-auto md:h-full lg:px-0">
        {children}
      </div>
    </main>
  );
}

Container.Left = LeftContainer;
Container.Right = RightContainer;

LeftContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

RightContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

Container.propTypes = {
  children: PropTypes.node.isRequired,
};