BasicStatistics.js

import { Grid, Paper, Typography } from '@mui/material';

function BasicStatistics() {
  //make json object here with fake info
  let stats = [
    {
      id: 1,
      name: 'Total Enrollment',
      value: '50',
    },
    {
      id: 2,
      name: 'Percentage Passing',
      value: '88%',
    },
    {
      id: 3,
      name: 'Percentage Active Users',
      value: '90%',
    },
  ];

  return (
    <Grid sx={{ flexGrow: 1, padding: 40 + 'px' }} container spacing={2}>
      <Grid item xs={12}>
        <Grid container justifyContent="center" spacing={5}>
          {stats.map((stat) => (
            <Grid key={stat.id} item>
              <Paper
                sx={{
                  height: 140,
                  width: 200,
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Typography variant="h3">{stat.value}</Typography>
                {stat.name}
              </Paper>
            </Grid>
          ))}
        </Grid>
      </Grid>
    </Grid>
  );
}
export default BasicStatistics;