54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
import Box from '@mui/material/Box';
|
|
import { useTheme } from '@mui/material/styles';
|
|
|
|
import { layoutClasses } from 'src/layouts/classes';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function Main({ sx, children, layoutQuery, ...other }) {
|
|
const theme = useTheme();
|
|
|
|
const renderContent = (
|
|
<Box
|
|
sx={{
|
|
py: 5,
|
|
px: 3,
|
|
width: 1,
|
|
borderRadius: 2,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
bgcolor: 'background.default',
|
|
boxShadow: theme.customShadows.card,
|
|
maxWidth: 'var(--layout-auth-content-width)',
|
|
}}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
component="main"
|
|
className={layoutClasses.main}
|
|
sx={{
|
|
px: 2,
|
|
py: 5,
|
|
zIndex: 9,
|
|
display: 'flex',
|
|
flex: '1 1 auto',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
[theme.breakpoints.up(layoutQuery)]: {
|
|
px: 0,
|
|
py: 'calc(var(--layout-header-desktop-height) + 24px)',
|
|
},
|
|
...sx,
|
|
}}
|
|
{...other}
|
|
>
|
|
{renderContent}
|
|
</Box>
|
|
);
|
|
}
|