Assessments.js

import AssessmentDistributionChart from '../charts/AssessmentDistributionChart.js';
import { Grid, Typography } from '@mui/material';

function Assessments() {
  return (
    <div>
      <Typography variant="h2" sx={{ textAlign: 'center', padding: 20 + 'px' }}>
        Grade Distribution by Assessment
      </Typography>
      <Grid container justifyContent="center">
        <Grid container xs={6} justifyContent="center">
          <AssessmentDistributionChart />
        </Grid>
        <Grid container xs={6} justifyContent="center">
          <AssessmentDistributionChart />
        </Grid>
        <Grid container xs={6} justifyContent="center">
          <AssessmentDistributionChart />
        </Grid>
        <Grid container xs={6} justifyContent="center">
          <AssessmentDistributionChart />
        </Grid>
      </Grid>
    </div>
  );
}

export default Assessments;