55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface MainContentProps {
|
|
children: ReactNode;
|
|
hasSidebar: boolean;
|
|
}
|
|
|
|
export function MainContent({ children, hasSidebar }: MainContentProps) {
|
|
return (
|
|
<Box
|
|
as="main"
|
|
display="flex"
|
|
flexDirection="col"
|
|
flexGrow={1}
|
|
style={{
|
|
paddingTop: '56px', // Header height
|
|
marginLeft: hasSidebar ? '260px' : '0',
|
|
transition: 'margin-left 0.2s ease-in-out',
|
|
}}
|
|
>
|
|
<Box
|
|
position="relative"
|
|
width="full"
|
|
maxWidth="full"
|
|
flexGrow={1}
|
|
display="flex"
|
|
flexDirection="col"
|
|
>
|
|
{/* Background Grid */}
|
|
<Box
|
|
position="absolute"
|
|
inset={0}
|
|
pointerEvents="none"
|
|
zIndex={0}
|
|
style={{
|
|
backgroundImage:
|
|
'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.018) 1px, transparent 0)',
|
|
backgroundSize: '32px 32px',
|
|
opacity: 0.5,
|
|
backgroundAttachment: 'fixed',
|
|
}}
|
|
/>
|
|
|
|
{/* Content */}
|
|
<Box position="relative" zIndex={1} flexGrow={1} display="flex" flexDirection="col">
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|