31 lines
693 B
TypeScript
31 lines
693 B
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
|
|
export interface ContentShellProps {
|
|
children: ReactNode;
|
|
header?: ReactNode;
|
|
sidebar?: ReactNode;
|
|
}
|
|
|
|
export const ContentShell = ({
|
|
children,
|
|
header,
|
|
sidebar
|
|
}: ContentShellProps) => {
|
|
return (
|
|
<Box display="flex" flexDirection="col" fullHeight>
|
|
{header && <Box borderBottom>{header}</Box>}
|
|
<Box display="flex" flex={1} minHeight="0">
|
|
{sidebar && (
|
|
<Box width="18rem" borderRight display={{ base: 'none', lg: 'block' }}>
|
|
{sidebar}
|
|
</Box>
|
|
)}
|
|
<Box flex={1} minWidth="0">
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|