Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Box, styled } from '@mui/material';

const CustomGrid = styled('div')(({ theme }) => ({
  columnGap: '1rem',
  display: 'grid',
  gridTemplateColumns: '1fr',
  gridTemplateRows: 'auto',
  rowGap: '0.5rem',
  gridTemplateAreas: '"main" "aside"',
  [theme.breakpoints.up('sm')]: {
    gridTemplateColumns: '1fr 2fr',
    gridTemplateAreas: '"sidebar main" ". aside"'
  },
  [theme.breakpoints.up('md')]: {
    gridTemplateColumns: '2fr 5fr  3fr',
    gridTemplateAreas: '"sidebar main aside"'
  }
}));

const CustomColumn = styled(Box)(({ theme }) => ({
  position: 'relative',
  height: 'fit-content',
  display: 'grid',
  gap: theme.spacing(0.5),
  overflow: 'hidden'
}));

const AppGrid = ({
  renderSidebar = () => null,
  renderMain = () => null,
  renderAside = () => null
}) => {
  return (
    <CustomGrid>
      <CustomColumn
        sx={{
          display: { xs: 'none', sm: 'grid' },
          gridArea: 'sidebar'
        }}
      >
        {renderSidebar()}
      </CustomColumn>
      <CustomColumn sx={{ gridArea: 'main' }}>{renderMain()}</CustomColumn>
      <CustomColumn sx={{ gridArea: 'aside' }}>{renderAside()}</CustomColumn>
    </CustomGrid>
  );
};

export default AppGrid;