Legend

tcmts.registry.pages.Legend · #m5fqafq2 · term · runs anywhere

What the place bar's and dots' colours say: anywhere, server, browser (with places, how many of each, those there are).

import type { PlaceMix } from "#codebase/tcmts/share";

export function Legend({ places }: { places?: PlaceMix | undefined }) {
  const all: [string, string, number | undefined][] = [
    ["any", "anywhere", places?.anywhere],
    ["srv", "server", places?.server],
    ["brw", "browser", places?.browser],
  ];
  return (
    <span className="legend">
      {all
        .filter(([, , n]) => n === undefined || n > 0)
        .map(([cls, word, n]) => (
          <span key={cls} className="li">
            <span className={`dot ${cls}`} />
            {n === undefined ? word : `${n} ${word}`}
          </span>
        ))}
    </span>
  );
}

uses

used by