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;