Skip to content

Commit

Permalink
feat: optimize member card display
Browse files Browse the repository at this point in the history
  • Loading branch information
@ozline
ozline committed Jun 5, 2024
1 parent 855f51d commit 866f109
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 25 deletions.
28 changes: 18 additions & 10 deletions src/components/Member/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Avatar } from "@/components/ui/avatar"
import BrowserOnly from '@docusaurus/BrowserOnly';
import { memberData } from "@/components/Member/memberData";
import GithubIcon from '@site/static/img/github.svg';
import React, { useState, useMemo, useEffect } from 'react';

export default function Component() {
Expand Down Expand Up @@ -65,9 +65,9 @@ export default function Component() {

))}
</div>
{/* Focus 选择 */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6">{activeYear + "年秋季"}</h2>
<h2 className="text-2xl font-bold mb-6">{(parseInt(activeYear,10) - 1) + " - " + activeYear + "学年"}</h2>
{/* Focus 选择 */}
<div className="mb-4 flex flex-wrap">
{focusOptionsWithCount.map(({ focus, count }) => (
<div
Expand All @@ -81,25 +81,33 @@ export default function Component() {
))}
</div>
{/* 成员展示 */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
<div className="grid grid-cols-2 md:grid-cols-6 gap-6">
{filteredMembers.map((member) => (
<div
key={member.avatar}
className="flex flex-col items-center gap-2 bg-white dark:bg-gray-950 p-4 rounded-lg shadow-md"
className="flex flex-col items-center gap-1 bg-white dark:bg-gray-950 p-2 rounded-lg shadow-md" // 添加 max-w-xs 和 mx-auto 以限制卡片宽度并在其父容器中居中
>
<Avatar>
{LazyLoad ? (
{LazyLoad ? (
<LazyLoad>
<img src={"https://img.w2fzu.com/member/" + member.avatar} alt={member.name} className="w-20 h-20 rounded-full" />
</LazyLoad>
) : (
<div>Loading...</div>
)}
)}
</Avatar>
<div className="text-center">
<h3 className="font-semibold">{member.name}</h3>
<p className="text-gray-500 dark:text-gray-400 text-sm">{member.major}</p>
{member.github !== "null" && <a href={"https://github.com/" + member.github}>{member.github}</a>}
<h3 className="font-semibold text-lg mb-1">{member.name}</h3>
<p className="text-gray-500 dark:text-gray-400 text-xs mb-1">{member.major}</p>
{member.github !== "null" && (
<a
href={"https://github.com/" + member.github}
className="flex items-center justify-center text-[var(--ifm-color-primary)] hover:text-[var(--ifm-color-primary-light)] transition duration-300 text-xs"
>
<GithubIcon className="w-3 h-3 mr-1" />
{member.github}
</a>
)}
</div>
</div>
))}
Expand Down
30 changes: 15 additions & 15 deletions src/components/Member/memberData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,33 @@ export const memberData: MemberData = {
// { avatar: "/placeholder-avatar.jpg", name: "Emily Davis", profession: "Data Analyst" },
],
"2022": [
{ avatar: "2022/frontends_python_zyy.jpg", name: "张艺耀", focus: "前端", major:"21级人工智能", github: "null" },
{ avatar: "2022/frontends_python_zyy.jpg", name: "张艺耀", focus: "前端", major:"21级人工智能", github: "1379255913" },
{ avatar: "2022/frontends_python_wy.jpg", name: "吴悠", focus: "Python", major:"21级给排水", github: "null" },
{ avatar: "2022/frontends_ios_golang_lhx.jpg", name: "林黄骁", focus: "Go", major:"21级软件工程", github: "ozline" },

{ avatar: "2022/unity_lqy.jpg", name: "罗骐翼", focus: "Unity", major:"21级数媒", github: "null" },
{ avatar: "2022/unity_hzy.jpg", name: "黄致远", focus: "Unity", major:"21级计算机", github: "null" },
{ avatar: "2022/unity_wjy.jpg", name: "吴佳仪", focus: "Unity", major:"20级自动化", github: "null" },
{ avatar: "2022/unity_hhc.jpg", name: "何晗晨", focus: "Unity", major:"21级数媒", github: "null" },
{ avatar: "2022/unity_yxx.jpg", name: "袁夏鑫", focus: "Unity", major:"21级软件工程", github: "null" },
{ avatar: "2022/unity_hkh.jpg", name: "黄铠赫", focus: "Unity", major:"21级数媒", github: "null" },
{ avatar: "2022/unity_ywx.jpg", name: "姚玮欣", focus: "Unity", major:"20级计算机", github: "null" },
{ avatar: "2022/unity_ywx.jpg", name: "姚玮欣", focus: "Unity", major:"20级计算机", github: "yaoweixin" },

{ avatar: "2022/golang_ckf.jpg", name: "陈恺丰", focus: "Go", major:"20级电子信息工程", github: "null" },
{ avatar: "2022/golang_fyc.jpg", name: "方宇辰", focus: "Go", major:"20级软件工程", github: "null" },
{ avatar: "2022/golang_zzy.jpg", name: "张钊洋", focus: "Go", major:"20级电子信息工程", github: "null" },
{ avatar: "2022/frontends_ios_golang_lhx.jpg", name: "林黄骁", focus: "Go", major:"21级软件工程", github: "null" },
{ avatar: "2022/golang_ckf.jpg", name: "陈恺丰", focus: "Go", major:"20级电子信息工程", github: "KAIFENG-ch" },
{ avatar: "2022/golang_fyc.jpg", name: "方宇辰", focus: "Go", major:"20级软件工程", github: "Anxiu0101" },
{ avatar: "2022/golang_zzy.jpg", name: "张钊洋", focus: "Go", major:"20级电子信息工程", github: "rsooio" },

{ avatar: "2022/python_cxy.jpg", name: "陈昕远", focus: "Python", major:"20级软件工程", github: "null" },
{ avatar: "2022/python_gbq.jpg", name: "高炳强", focus: "Python", major:"21级人工智能", github: "null" },
{ avatar: "2022/python_lzp.jpg", name: "李志鹏", focus: "Python", major:"20级计算机", github: "null" },

{ avatar: "2022/android_sqt.jpg", name: "沈轻腾", focus: "Android", major:"21级计算机", github: "null" },
{ avatar: "2022/android_zyn.jpg", name: "张煜楠", focus: "Android", major:"21级软件工程", github: "null" },
{ avatar: "2022/android_sx.jpg", name: "孙逊", focus: "Android", major:"21级电子信息工程", github: "null" },
{ avatar: "2022/android_sqt.jpg", name: "沈轻腾", focus: "Android", major:"21级计算机", github: "theonenull" },
{ avatar: "2022/android_zyn.jpg", name: "张煜楠", focus: "Android", major:"21级软件工程", github: "Benxinm" },
{ avatar: "2022/android_sx.jpg", name: "孙逊", focus: "Android", major:"21级电子信息工程", github: "utf8-coding" },

{ avatar: "2022/frontends_zjz.jpg", name: "张佳泽", focus: "前端", major:"20级软件工程", github: "null" },
{ avatar: "2022/frontends_zjz.jpg", name: "张佳泽", focus: "前端", major:"20级软件工程", github: "sami-jiaze" },
{ avatar: "2022/frontends_czh.jpg", name: "陈泽华", focus: "前端", major:"20级软件工程", github: "null" },
{ avatar: "2022/frontends_pcy.jpg", name: "庞财莹", focus: "前端", major:"21级软件工程", github: "null" },
{ avatar: "2022/frontends_pcy.jpg", name: "庞财莹", focus: "前端", major:"21级软件工程", github: "xi-null" },
{ avatar: "2022/frontends_wxy.jpg", name: "吴星宇", focus: "前端", major:"21级计算机", github: "null" },
{ avatar: "2022/frontends_gcj.jpg", name: "龚辰珺", focus: "前端", major:"20级软件工程", github: "null" },
{ avatar: "2022/frontends_lx.jpg", name: "林翔", focus: "前端", major:"20级软件工程", github: "null" },
Expand All @@ -50,8 +50,8 @@ export const memberData: MemberData = {
{ avatar: "2022/java_czh.jpg", name: "陈桢函", focus: "Java", major:"20级软件工程", github: "null" },
{ avatar: "2022/java_zl.jpg", name: "朱辽", focus: "Java", major:"20级自动化", github: "null" },
{ avatar: "2022/java_hjq.jpg", name: "胡家齐", focus: "Java", major:"20级自动化", github: "null" },
{ avatar: "2022/java_lyd.jpg", name: "李炎东", focus: "Java", major:"21级软件工程", github: "null" },
{ avatar: "2022/java_ljh.jpg", name: "刘俊辉", focus: "Java", major:"21级人工智能", github: "null" },
{ avatar: "2022/java_lyd.jpg", name: "李炎东", focus: "Java", major:"21级软件工程", github: "SkyDDDog" },
{ avatar: "2022/java_ljh.jpg", name: "刘俊辉", focus: "Java", major:"21级人工智能", github: "SUPERGOG07" },
{ avatar: "2022/java_lzp.jpg", name: "李振鹏", focus: "Java", major:"20级软件工程", github: "null" },
{ avatar: "2022/java_xyj.jpg", name: "许影杰", focus: "Java", major:"20级软件工程", github: "null" },
{ avatar: "2022/java_cy.jpg", name: "陈艺", focus: "Java", major:"21级计算机", github: "null" },
Expand All @@ -61,10 +61,10 @@ export const memberData: MemberData = {
{ avatar: "2022/java_zcx.jpg", name: "张晨旭", focus: "Java", major:"20级计算机", github: "null" },
{ avatar: "2022/java_czf.jpg", name: "陈知菲", focus: "Java", major:"21级计算机", github: "null" },

{ avatar: "2022/art_lcy.jpg", name: "李宸晔", focus: "美术", major:"20级建筑学", github: "null" },
{ avatar: "2022/art_lcy.jpg", name: "李宸晔", focus: "美术", major:"20级建筑学", github: "ALLLOUD" },
{ avatar: "2022/art_lmq.jpg", name: "李鸣谦", focus: "美术", major:"20级信息安全", github: "null" },
{ avatar: "2022/art_cjw.jpg", name: "陈佳雯", focus: "美术", major:"21级数媒", github: "null" },
{ avatar: "2022/art_lxy.jpg", name: "林心悦", focus: "美术", major:"21级数媒", github: "null" },
{ avatar: "2022/art_hcx.jpg", name: "黄晨曦", focus: "美术", major:"21级信管", github: "null" },
{ avatar: "2022/art_hcx.jpg", name: "黄晨曦", focus: "美术", major:"21级信管", github: "mmmki" },
],
}
3 changes: 3 additions & 0 deletions static/img/github.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 866f109

Please sign in to comment.