viewfinder/packages/react/src/layouts/Basic/index.tsx

import * as React from 'react';
import clsx from 'clsx';
import { SpanValues as Span } from '@tesseract-design/viewfinder-base';

export interface RootProps extends React.HTMLProps<HTMLDivElement> {
  topBarWidget?: React.ReactNode;
}

export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
  children,
  topBarWidget,
  ...etcProps
}, ref) => (
  <>
    {topBarWidget}
    <div
      {...etcProps}
			data-viewfinder="main"
      className="box-border"
      ref={ref}
    >
      {children}
    </div>
  </>
));

Root.displayName = 'Root';

export type ContentContainerProps = Omit<React.HTMLProps<HTMLDivElement>, 'span'> & {
  span?: Span,
}

export const ContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
  children,
  span = 'normal',
}, ref) => {
  return (
    <div
      className={clsx(
				'px-8 box-border mx-auto w-full',
				span === 'narrow' && 'max-w-screen-2xs',
				span === 'normal' && 'max-w-screen-xs',
				span === 'wide' && 'max-w-screen-sm',
			)}
      ref={ref}
    >
      {children}
    </div>
  );
});

ContentContainer.displayName = 'ContentContainer'