45 lines
912 B
TypeScript
45 lines
912 B
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
|
|
export interface LayoutProps {
|
|
children: ReactNode;
|
|
header?: ReactNode;
|
|
footer?: ReactNode;
|
|
sidebar?: ReactNode;
|
|
}
|
|
|
|
export const Layout = ({
|
|
children,
|
|
header,
|
|
footer,
|
|
sidebar
|
|
}: LayoutProps) => {
|
|
return (
|
|
<Box display="flex" flexDirection="col" minHeight="100vh" bg="var(--ui-color-bg-base)">
|
|
{header && (
|
|
<Box as="header" position="sticky" top="0" zIndex={50}>
|
|
{header}
|
|
</Box>
|
|
)}
|
|
|
|
<Box display="flex" flex={1}>
|
|
{sidebar && (
|
|
<Box as="aside" width="16rem" display={{ base: 'none', lg: 'block' }}>
|
|
{sidebar}
|
|
</Box>
|
|
)}
|
|
|
|
<Box as="main" flex={1}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
|
|
{footer && (
|
|
<Box as="footer">
|
|
{footer}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|