feat(frontend): revamp channels into signal-map roster with GSAP stagger

This commit is contained in:
asepharyana
2026-08-25 23:17:39 +07:00
parent cab451f0e5
commit 2aa12b9ec5
4 changed files with 195 additions and 74 deletions
@@ -12,7 +12,23 @@ export function ChannelsView({
}) {
const { data: cultures } = useChannelCultures(100, initialCultures);
return (
<div className="space-y-5">
<div className="space-y-4">
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-3">
<div className="relative flex size-3 items-center justify-center">
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
<span className="relative inline-flex size-2 rounded-full bg-signal" />
</div>
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
CHANNEL ROSTER · SIGNAL_MAP
</h1>
</div>
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
<span className="text-ink-faint">NODES:</span>
<span className="font-bold text-signal">{cultures?.length ?? 0}</span>
</div>
</div>
{cultures ? (
<ChannelCultureGlossary cultures={cultures} />
) : (