|
- import * as React from 'react';
- import clsx from 'clsx';
- import { 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,
- className,
- ...etcProps
- }, ref) => (
- <>
- {topBarWidget}
- <div
- {...etcProps}
- data-viewfinder="main"
- className={clsx(
- 'box-border',
- className,
- )}
- 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',
- className,
- ...etcProps
- }, ref) => {
- return (
- <div
- {...etcProps}
- 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',
- className,
- )}
- ref={ref}
- >
- {children}
- </div>
- );
- });
-
- ContentContainer.displayName = 'ContentContainer'
|