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;