Spaces:
Sleeping
Sleeping
Create MemberList.jsx
Browse files- client/src/MemberList.jsx +19 -0
client/src/MemberList.jsx
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import React from 'react';
|
| 2 |
+
|
| 3 |
+
export default function MemberList({ members }) {
|
| 4 |
+
if (!members?.length) return <div style={{ color:'var(--muted)' }}>No members yet.</div>;
|
| 5 |
+
return (
|
| 6 |
+
<div className="member-list">
|
| 7 |
+
{members.map(m => (
|
| 8 |
+
<div key={m.id} className="member">
|
| 9 |
+
<div className="avatar" />
|
| 10 |
+
<div style={{ flex:1, minWidth:0 }}>
|
| 11 |
+
<div style={{ fontWeight:700, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{m.name}</div>
|
| 12 |
+
<div style={{ fontSize:12, color:'var(--muted)' }}>{m.id.slice(0,8)}</div>
|
| 13 |
+
</div>
|
| 14 |
+
{m.isHost && <div className="tag">Host</div>}
|
| 15 |
+
</div>
|
| 16 |
+
))}
|
| 17 |
+
</div>
|
| 18 |
+
);
|
| 19 |
+
}
|