|
- import * as React from 'react';
- import clsx from 'clsx';
-
- export interface RootProps extends React.HTMLProps<HTMLDivElement> {
- sidebarBaseWidget?: React.ReactNode;
- topBarWidget?: React.ReactNode;
- }
-
- export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
- children,
- topBarWidget,
- sidebarBaseWidget,
- className,
- ...etcProps
- }, ref) => (
- <>
- {topBarWidget}
- <div
- {...etcProps}
- ref={ref}
- data-viewfinder="main"
- className={clsx(
- 'box-border md:pr-[calc(50%-(var(--base-width)*0.5))]',
- className,
- )}
- >
- {children}
- </div>
- {sidebarBaseWidget}
- </>
- ))
-
- Root.displayName = 'Root';
-
-
- export interface ContentContainerProps extends React.HTMLProps<HTMLDivElement> {}
-
- export const MainContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
- children,
- className,
- ...etcProps
- }, ref) => (
- <div
- {...etcProps}
- className={clsx(
- 'px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:mr-0',
- className,
- )}
- ref={ref}
- >
- {children}
- </div>
- ));
-
- MainContentContainer.displayName = 'MainContentContainer';
-
- export interface SidebarMainContainerProps extends React.HTMLProps<HTMLDivElement> {}
-
- export const SidebarContentContainer = React.forwardRef<HTMLDivElement, SidebarMainContainerProps>(({
- children,
- className,
- ...etcProps
- }, ref) => (
- <div
- {...etcProps}
- className={clsx(
- 'px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0 md:w-[var(--base-width)]',
- className,
- )}
- ref={ref}
- >
- {children}
- </div>
- ));
-
- SidebarContentContainer.displayName = 'SidebarMainContainer';
|