关于页面

任务介绍

关于页面用户对我组工作量的展示。

实现效果

代码解释

首先封装一个子组件用于展示用户头像和名称。

const UserGrid = ({src,name,size,link,
}: {src: any;name: any;size?: any;link?: any;
}) => (<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}><IconButton><Link to={link} target="_blank"><Avatar src={src} sx={{ height: size ?? 60, width: size ?? 60 }} /></Link></IconButton><Typography variant={size && size > 60 ? "h6" : "body1"} color={grey[700]}>{name}</Typography></Box>
);

由于老师和学生的头像尺寸不同，所以需要支持尺寸、avatar、name等的输入功能。

然后根据从github获取到的数据，进行可视化的数据展示。