49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
export type Member = {
|
|
id: string;
|
|
name: string;
|
|
role: "admin" | "mod" | "sub" | "viewer";
|
|
avatar?: string;
|
|
};
|
|
|
|
const roleStyles = {
|
|
admin: { label: "ADMIN", cls: "text-red-400 bg-red-500/10 border-red-500/30" },
|
|
mod: { label: "MOD", cls: "text-yellow-400 bg-yellow-400/10 border-yellow-400/30" },
|
|
sub: { label: "SUB", cls: "text-acid-green bg-acid-green/10 border-acid-green/30" },
|
|
viewer: { label: "VIEWER", cls: "text-blue-400 bg-blue-400/10 border-blue-400/30" },
|
|
};
|
|
|
|
const AVATARS = ["🗡️", "🛡️", "🏹", "⚔️", "🔥", "💀", "🐉", "⚡"];
|
|
|
|
const MOCK_MEMBERS: Member[] = [
|
|
{ id: "1", name: "HunterX42", role: "sub" },
|
|
{ id: "2", name: "IronWarden", role: "mod" },
|
|
{ id: "3", name: "NoviceHunter", role: "viewer" },
|
|
{ id: "4", name: "BladeRunner7", role: "sub" },
|
|
{ id: "5", name: "EmberWolf", role: "viewer" },
|
|
{ id: "6", name: "ShadowCrawler", role: "viewer" },
|
|
];
|
|
|
|
export default function MemberList({ members = MOCK_MEMBERS }: { members?: Member[] }) {
|
|
return (
|
|
<div className="flex flex-col gap-2 max-h-[320px] overflow-y-auto pr-1">
|
|
{members.map((m, i) => {
|
|
const role = roleStyles[m.role];
|
|
const avatar = AVATARS[i % AVATARS.length];
|
|
return (
|
|
<div
|
|
key={m.id}
|
|
className="flex items-center gap-3 px-3 py-2 bg-wy-surface border border-wy-border rounded-md hover:bg-wy-surface/50 transition-colors duration-150"
|
|
>
|
|
<div className="w-8 h-8 rounded-full bg-wy-dark border border-wy-border flex items-center justify-center text-sm flex-shrink-0">
|
|
{avatar}
|
|
</div>
|
|
<div className="flex-1 text-sm text-wy-text-primary font-mono">{m.name}</div>
|
|
<span className={`text-xs font-mono tracking-wider px-2 py-0.5 border rounded-md ${role.cls}`}>
|
|
{role.label}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
} |