d2c2472e29
* Start the home page * Fix the Tile and Tile Grid Component and also created the homePage * Recreated the tile component with TileBasic * fix the tile component * Fixed: tile length sizing * Rename page export * Added: page to routes * Renamed: sidenav title Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>
55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
import React, { useEffect, useRef } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Box from '@mui/material/Box';
|
|
import { makeStyles } from '@mui/styles';
|
|
|
|
import Tile from './Tile';
|
|
|
|
const useStyles = makeStyles({
|
|
menu: {
|
|
display: 'grid',
|
|
gap: '1.75rem',
|
|
backgroundColor: '#f9f9f9',
|
|
padding: '24px 48px',
|
|
'@media (max-width: 900px)': {
|
|
gridTemplateColumns: 'repeat(2, minmax(250px, auto)) !important'
|
|
},
|
|
'@media (max-width: 690px)': {
|
|
gridTemplateColumns: 'repeat(1, minmax(250px, auto)) !important'
|
|
}
|
|
}
|
|
});
|
|
|
|
export default function TileGrid({ tiles }) {
|
|
const classes = useStyles();
|
|
// to make the grid adjust its elemnts:
|
|
const myContainer = useRef(null);
|
|
let gridColumns = 2;
|
|
useEffect(() => {
|
|
const grid = myContainer.current;
|
|
const gridChild = grid.childElementCount;
|
|
gridColumns = Math.floor(Math.sqrt(gridChild));
|
|
grid.style.gridTemplateColumns = `repeat(${gridColumns}, minmax(250px, auto))`;
|
|
});
|
|
return (
|
|
<Box className={classes.menu} ref={myContainer}>
|
|
{tiles &&
|
|
tiles.map((tile) => (
|
|
<Tile key={tile.name + tile.path} data={{ name: tile.name, path: tile.path }}>
|
|
{' '}
|
|
{tile.icon}
|
|
</Tile>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
TileGrid.propTypes = {
|
|
// tiles: PropTypes.object({
|
|
// name: PropTypes.string.isRequired,
|
|
// path: PropTypes.string.isRequired,
|
|
// icon: PropTypes.any
|
|
// })
|
|
tiles: PropTypes.any
|
|
};
|