72 lines
3.2 KiB
JavaScript
72 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
|
|
const memberSections = [
|
|
{
|
|
title: 'Foundation Team',
|
|
count: 8,
|
|
members: [
|
|
{ id: 1, name: 'Anderson', tag: 'Anderson#0001', initial: 'A', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)', status: 'online', banner: '#ff0000', customStatus: '🔥 Building AeThex', badge: 'Founder', roles: [{ name: 'Founder', color: '#ff0000' }, { name: 'Foundation', color: '#cc0000' }], about: 'Creator of AeThex ecosystem. Building the future of developer tools.' },
|
|
{ id: 2, name: 'Trevor', tag: 'Trevor#0042', initial: 'T', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)', status: 'online', banner: '#cc0000', badge: 'Foundation', roles: [{ name: 'Foundation', color: '#cc0000' }, { name: 'Developer', color: '#5865f2' }], about: 'Lead developer on authentication systems.' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Labs Team',
|
|
count: 12,
|
|
members: [
|
|
{ id: 3, name: 'Sarah', tag: 'Sarah#1337', initial: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', status: 'labs', banner: '#ffa500', activity: 'Testing v2.0', badge: 'Labs', roles: [{ name: 'Labs', color: '#ffa500' }, { name: 'Tester', color: '#3ba55d' }], about: 'Experimental features lead. Breaking things so you don\'t have to.' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Developers',
|
|
count: 47,
|
|
members: [
|
|
{ id: 4, name: 'Marcus', tag: 'Marcus#2048', initial: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', status: 'in-game', activity: 'Building', banner: '#0066ff', roles: [{ name: 'Developer', color: '#5865f2' }], about: 'Full-stack developer passionate about clean code.' },
|
|
{ id: 5, name: 'DevUser_2847', tag: 'DevUser_2847#2847', initial: 'D', status: 'online', roles: [{ name: 'Member', color: '#99aab5' }] },
|
|
],
|
|
},
|
|
{
|
|
title: 'Community',
|
|
count: 61,
|
|
members: [
|
|
{ id: 6, name: 'JohnDev', tag: 'JohnDev#9999', initial: 'J', status: 'idle', roles: [{ name: 'Member', color: '#99aab5' }] },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function MemberSidebar({ onMemberClick }) {
|
|
return (
|
|
<div className="member-sidebar">
|
|
<div className="member-header">Members — 128</div>
|
|
|
|
<div className="member-list">
|
|
{memberSections.map((section) => (
|
|
<div key={section.title} className="member-section">
|
|
<div className="member-section-title">{section.title} — {section.count}</div>
|
|
{section.members.map((member) => (
|
|
<div
|
|
key={member.id}
|
|
className="member-item"
|
|
onClick={() => onMemberClick?.(member)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<div
|
|
className="member-avatar-small"
|
|
style={member.gradient ? { background: member.gradient } : undefined}
|
|
>
|
|
{member.initial}
|
|
{member.status && (
|
|
<div className={`online-indicator ${member.status}`}></div>
|
|
)}
|
|
</div>
|
|
<div className="member-name">{member.name}</div>
|
|
{member.activity && (
|
|
<div className="member-activity">{member.activity}</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|