Sapphire开发日志 (十) 关于页面

news2024/12/25 9:08:27

关于页面

任务介绍

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

实现效果

在这里插入图片描述

在这里插入图片描述

代码解释

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

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获取到的数据,进行可视化的数据展示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1857920.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

模组硬件通用丨模组USB电路设计指南

USB&#xff08;全称&#xff1a;Universal Serial Bus&#xff09;是一种串口总线标准&#xff0c;也是一种输入输出接口的技术规范&#xff0c;广泛应用于个人电脑和移动设备等信息通讯产品&#xff0c;并扩展至摄影器材、数字电视&#xff08;机顶盒&#xff09;、游戏机等相…

gpu测试渲染网站有哪些?免费GPU渲染平台介绍

GPU作为渲染领域的核心硬件&#xff0c;对于提高渲染速度和质量起着决定性作用。尽管购买高性能GPU的成本相对较高&#xff0c;但是通过GPU云渲染平台&#xff0c;用户可以以较低的成本享受到高效渲染服务的便利。现在&#xff0c;探索一些提供免费试用的GPU云渲染服务网站&…

ScanConfTool_V1.2使用手册

文章目录 ScanConfTool_V1.2使用手册1 背景2 扫描配置步骤2.1 扫描服务安装1&#xff09; 双击”ScanConfTool.exe”,运行安装服务程序2&#xff09;启动配置程序3&#xff09;开始配置4&#xff09;安装扫描服务5&#xff09;提交配置 2.2 电脑IP地址配置1&#xff09; 在wind…

ES内存溢出报错问题解决方案

博主有话说&#xff1a;该博文根据实际案例编写&#xff0c;在编写过程中将敏感信息进行替换&#xff0c;可能存在矛盾的地方&#xff0c;望见谅 1 错误详情 [typecircuit_breaking_exception, reason[parent] Data too large, data for [<http_request>] would be [1256…

揭秘红酒酿造魔法:看葡萄如何华丽变身酿成

红酒&#xff0c;这一液体中的诗篇&#xff0c;从葡萄园中的翠绿到酒窖里的深沉&#xff0c;每一滴都蕴含着大自然的恩赐与酿酒师的智慧。今天&#xff0c;就让我们一起揭开红酒酿造的神秘面纱&#xff0c;探寻从葡萄到佳酿的魔法之旅&#xff0c;并特别聚焦在备受赞誉的雷盛红…

2024年数据、自动化与智能计算国际学术会议(ICDAIC 2024)

全称&#xff1a;2024年数据、自动化与智能计算国际学术会议&#xff08;ICDAIC 2024&#xff09; 会议网址:http://www.icdaic.com 会议地点: 厦门 投稿邮箱&#xff1a;icdaicsub-conf.com投稿标题&#xff1a;ArticleTEL。投稿时请在邮件正文备注&#xff1a;学生投稿&#…

第二届“讯方杯”全国大学生信息技术应用及创新大赛圆满落幕!

6月21日-23日&#xff0c;2023-2024“讯方杯”全国大学生信息技术应用及创新大赛全国总决赛在广东科技学院松山湖校区圆满举办。本届全国总决赛由深圳市讯方技术股份有限公司主办&#xff0c;广东科技学院承办&#xff0c;深圳市职前通教育有限责任公司协办。 广东科技学院副校…

【干货】客户裂变实战:策略与案例分享

在当今竞争激烈的市场环境中&#xff0c;客户裂变成为了许多企业快速增长的关键策略。客户裂变&#xff0c;即利用现有客户的社交网络和影响力&#xff0c;吸引更多潜在客户&#xff0c;从而实现客户数量的快速增长。本文将分享一些客户裂变的实战策略及成功案例。 一、客户裂…

【权威发布】2024年文化、设计与社会科学国际会议(ICCDSS 2024)

2024年文化、设计与社会科学国际会议 2024 International Conference on Culture, Design, and Social Sciences 会议简介 2024年文化、设计与社会科学国际会议旨在为全球范围内的专家学者提供一个交流文化、设计与社会科学研究成果的平台。会议将围绕文化、设计与社会科学的前…

使用Python进行数据分析和自动化

组织严重依赖数据分析和自动化来提高运营效率。在本文中&#xff0c;我们将使用 Python&#xff08;一种用于通用编程的高级编程语言&#xff09;的示例来研究数据分析和自动化的基础知识。 什么是数据分析&#xff1f; 数据分析是指检查、清理、转换和建模数据的过程&#xf…

ONLYOFFICE 桌面编辑器8.1最新版本强势来袭!

文章目录 软件介绍一、安装与界面安装过程用户界面 二、性能与稳定性启动速度与响应时间稳定性 三、兼容性与集成文件格式兼容性第三方集成 四、可支持多人协作五、功能齐全的PDF编辑器六、PDF表单七、文档编辑器中的新增功能八、总结九、自己的建议 软件介绍 在现代办公环境中…

【Oracle安装】Linux安装Oracle内存不够怎么都装不上,卡在46%、60%、36%;内存不足解决办法,疑难杂症

一、问题描述 1.oracle 安装不报错&#xff0c;但就是无法安装成功&#xff0c;卡住 总是中途卡住&#xff0c;不一定卡在哪儿&#xff0c;也许是36%、46%、60%等等 它也不报错&#xff0c;什么都不说&#xff0c;或者过一会儿服务器自己把oracle的安装进程给杀了&#xff08…

从广州到上海|荣载光的智慧 与SSHT共同探索智能照明更多想象空间

随着生活水平的提高&#xff0c;大众对高品质生活的追求脚步逐步加快&#xff0c;人们对智能照明的需求日益多样化&#xff0c;不再仅仅满足于传统的照明功能&#xff0c;而是转向智能照明系统&#xff0c;提出更高的需求。 展望未来&#xff0c;中国智能照明市场预计将迎来全…

SpringMVC系列十: 中文乱码处理与JSON处理

文章目录 中文乱码处理自定义中文乱码过滤器Spring提供的过滤器处理中文 处理json和HttpMessageConverter<T>处理JSON-ResponseBody处理JSON-RequestBody处理JSON-注意事项和细节HttpMessageConverter<T\>文件下载-ResponseEntity<T\>作业布置 上一讲, 我们学…

区块链学习03-空投篇

Hybrid 是与 以太坊 兼容的第 2 层区块链&#xff0c;集成了混合专家 (MoE) 框架&#xff0c;支持以即插即用的方式轻松创建和货币化 AI 代理。该平台旨在提高区块链应用程序中数据的完整性和可用性&#xff0c;支持跨各个行业开发和部署 AI 驱动的解决方案。 Hybrid 正在为其…

JINGWHALE WH 迭代思维法:科学优化问题解析、任务策略规划与高效工作汇报的赋能艺术

JINGWHALE 对此论文相关未知以及已知概念、定理、公式、图片等内容的感悟、分析、创新、创造等拥有作品著作权。未经 JINGWHALE 授权&#xff0c;禁止转载与商业使用。

【网络安全的神秘世界】搭建dvwa靶场

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 下载DVWA https://github.com/digininja/DVWA/blob/master/README.zh.md 安装DVWA 安装phpstudy https://editor.csdn.net…

黄仁勋口中“生物工程化”的美好愿景,正在被这家公司努力变成现实

6月20日&#xff0c;一家为人类细胞编码新疗法的公司&#xff0c;也是合成生物学领域的先驱英国合成生物公司bit.bio宣布推出ioAstrocytes&#xff0c;这是一种功能性人类iPSC&#xff08;诱导多能干细胞&#xff09;衍生的星形胶质细胞&#xff0c;科学家表示该产品为中枢神经…

深入理解Qt属性系统[Q_PROPERTY]

Qt 属性系统是 Qt 框架中一个非常核心和强大的部分&#xff0c;它提供了一种标准化的方法来访问对象的属性。这一系统不仅使得开发者能够以一致的方式处理各种数据类型&#xff0c;还为动态属性的管理提供了支持&#xff0c;并与 Qt 的元对象系统紧密集成。在这篇文章中&#x…

每日AI资讯-20240622

1. 可灵AI全新功能上线&#xff01; 可灵AI全新功能上线&#xff01;图生视频和视频续写来啦&#xff01; 图生视频&#xff1a;上传任意图片&#xff0c;生成5秒精彩视频。支持添加提示词控制图像运动视频续写&#xff1a;对生成视频一键续写4&#xff5e;5秒&#xff0c;支持…