Updated: tile basic and icon

src/components/TileBasic/index.js

@@ -3,14 +3,8 @@ import PropTypes from 'prop-types';
 import MDBox from 'components/MDBox';
 import { makeStyles } from '@mui/styles';
 import { Grid } from '@mui/material';
-import SetupIcon from 'assets/images/SetupIcon';
 
 const useStyles = makeStyles({
-  iconSize: {
-    width: '50%',
-    height: '50%',
-    marginBottom: '10px'
-  },
   centerContent: {
     display: 'flex',
     alignItems: 'center',
@@ -41,9 +35,10 @@ export default function TileBasic({ tiles }) {
         {tiles &&
           tiles.map((tile) => (
             <>
-              <Grid item xs={12} sm={6} md={4}>
+              <Grid item xs={12} sm={6} md={tiles.length <= 4 ? undefined : 4}>
                 <MDBox
-                  key={tile._id}
+                  key={tile.name + tile.path}
+                  data={{ name: tile.name, path: tile.path }}
                   className={classes.centerContent}
                   sx={{
                     height: 200,
@@ -51,7 +46,7 @@ export default function TileBasic({ tiles }) {
                     padding: '32px 40px'
                   }}
                 >
-                  <SetupIcon className={classes.iconSize} color="blue" />
+                  {tile.icon}
                   {tile.name}
                 </MDBox>
               </Grid>