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

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

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

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


export type ContentContainerProps = React.HTMLProps<HTMLDivElement> & {}

export const MainContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
  children,
}, ref) => (
  <div
    className={layouts.RightSidebarStatic.ContentContainer()}
    ref={ref}
  >
    {children}
  </div>
));

MainContentContainer.displayName = 'MainContentContainer'

export type SidebarMainContainerProps = React.HTMLProps<HTMLDivElement> & {}

export const SidebarContentContainer = React.forwardRef<HTMLDivElement, SidebarMainContainerProps>(({
  children,
  ...etcProps
}, ref) => (
  <div
    {...etcProps}
    className={layouts.RightSidebarStatic.SidebarMainContainer()}
    ref={ref}
  >
    {children}
  </div>
));

SidebarContentContainer.displayName = 'SidebarMainContainer';