Newer
Older
import { Grid, Paper, Typography } from '@mui/material';
Emily Nicole Adams
committed
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>
Emily Nicole Adams
committed
</Grid>
Emily Nicole Adams
committed
</Grid>
Emily Nicole Adams
committed
}