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

import * as React from 'react';
import {LayoutArgs, layouts, Span} from '@tesseract-design/viewfinder-base';

export type RootProps = React.HTMLProps<HTMLDivElement> & {
  topBarWidget?: React.ReactNode;
}

export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
  children,
  topBarWidget,
  ...etcProps
}, ref) => (
  <>
    {topBarWidget}
    <main
      {...etcProps}
      className={layouts.Basic.ContentBase()}
      ref={ref}
    >
      {children}
    </main>
  </>
));

Root.displayName = 'Root';

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

export const ContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
  children,
  span = Span.NORMAL,
}, ref) => {
  const args = React.useMemo<LayoutArgs>(() => ({
    span,
    mainSidebarOpen: false,
  }), [
    span
  ]);

  return (
    <div
      className={layouts.Basic.ContentContainer(args)}
      ref={ref}
    >
      {children}
    </div>
  )
});

ContentContainer.displayName = 'ContentContainer'