perf: change the DA to something more readable

This commit is contained in:
Pierre Ryssen
2026-03-11 12:26:45 +01:00
parent cd15c81b53
commit 9642f2511a
22 changed files with 136 additions and 120 deletions

View File

@@ -6,10 +6,10 @@ export type Member = {
};
const roleStyles = {
admin: { label: "ADMIN", cls: "text-red-400 bg-red-500/8 border-red-500/20" },
mod: { label: "MOD", cls: "text-yellow-400 bg-yellow-400/8 border-yellow-400/20" },
sub: { label: "SUB", cls: "text-[#4aff8c] bg-[#4aff8c]/8 border-[#4aff8c]/20" },
viewer: { label: "VIEWER", cls: "text-blue-400 bg-blue-400/8 border-blue-400/20" },
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 = ["🗡️", "🛡️", "🏹", "⚔️", "🔥", "💀", "🐉", "⚡"];
@@ -32,13 +32,13 @@ export default function MemberList({ members = MOCK_MEMBERS }: { members?: Membe
return (
<div
key={m.id}
className="flex items-center gap-3 px-3 py-2 bg-white/[0.02] border border-[#1a2a1a] rounded-sm hover:bg-[#4aff8c]/3 transition-colors duration-150"
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-7 h-7 rounded-full bg-[#0a1a0a] border border-[#1a2a1a] flex items-center justify-center text-xs flex-shrink-0">
<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-[#b0c4b0] font-mono">{m.name}</div>
<span className={`text-[9px] font-mono tracking-wider px-2 py-0.5 border rounded-sm ${role.cls}`}>
<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>