35 lines
752 B
TypeScript
35 lines
752 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './primitives/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} overflow="auto">
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|