Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 1x 14x 14x 14x 14x 14x 57x 57x 57x 2x | import { useState } from "react";
import {
Box,
Checkbox,
FormControlLabel,
IconButton,
Menu,
Stack,
Tooltip,
Typography,
} from "@mui/material";
import TuneIcon from "@mui/icons-material/Tune";
const WIDGET_LABELS = {
gpa: "GPA",
achievements: "Achievements",
distribution: "Score Distribution",
calendar: "Upcoming Assignments",
search_teacher: "Search Teacher",
};
const DashboardPersonalizationMenu = ({ allWidgetIds, hiddenSet, onToggle }) => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleOpen = (e) => setAnchorEl(e.currentTarget);
const handleClose = () => setAnchorEl(null);
return (
<>
<Tooltip title="Customize dashboard" placement="bottom">
<IconButton
id="student-dashboard-personalization-button"
color="inherit"
onClick={handleOpen}
aria-haspopup="menu"
aria-expanded={open ? "true" : undefined}
>
<TuneIcon />
</IconButton>
</Tooltip>
<Menu
id="student-dashboard-personalization-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{ "aria-label": "dashboard widget visibility" }}
>
<Box sx={{ px: 2, py: 1, minWidth: 240 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
Show or hide widgets
</Typography>
<Stack spacing={0.5}>
{allWidgetIds.map((id) => {
const label = WIDGET_LABELS[id] || id;
const isVisible = !hiddenSet.has(id);
return (
<FormControlLabel
key={id}
control={
<Checkbox
id={`student-dashboard-personalization-toggle-${id}`}
checked={isVisible}
onChange={() => onToggle(id)}
size="small"
/>
}
label={
<Typography variant="body2" data-widget-id={id}>
{label}
</Typography>
}
/>
);
})}
</Stack>
</Box>
</Menu>
</>
);
};
export default DashboardPersonalizationMenu;
|