import React from 'react'; | |
import { Link } from 'wouter'; | |
import './GroupDetail.css'; | |
const GroupMembers = ({ members }) => { | |
return ( | |
<section className="group-section"> | |
<h2>成员列表</h2> | |
<div className="member-list"> | |
{members.length > 0 ? ( | |
members.map(m => ( | |
<Link href={`/information/${m.user_id}`} key={m.user_id} className="member-link"> | |
<div className="member-card"> | |
<img | |
src={m.avatar_url || 'https://picsum.photos/100/100'} | |
alt={m.username} | |
className="member-avatar" | |
/> | |
<p className="member-name">{m.username}</p> | |
</div> | |
</Link> | |
)) | |
) : ( | |
<p className="empty-message">暂无成员</p> | |
)} | |
</div> | |
</section> | |
); | |
}; | |
export default GroupMembers; |