PlaceBar

tcmts.registry.pages.PlaceBar · #ixjw5a2o · term · runs anywhere

Where a release's code runs, as a bar: anywhere, on the server and in the browser, by how many definitions run there (thin, in a line of text).

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

export function PlaceBar({ places, thin }: { places: PlaceMix; thin?: boolean }) {
  const all = places.anywhere + places.server + places.browser;
  const w = (n: number) => ({ width: `${(100 * n) / (all || 1)}%` });
  const said_ =
    [
      places.anywhere && `${places.anywhere} anywhere`,
      places.server && `${places.server} on the server`,
      places.browser && `${places.browser} in the browser`,
    ]
      .filter(Boolean)
      .join(", ") || "nothing that runs";
  return (
    <span
      className={thin ? "place thin" : "place"}
      role="img"
      aria-label={`Runs ${said_}`}
      title={said_}
    >
      {places.anywhere > 0 && <span className="any" style={w(places.anywhere)} />}
      {places.server > 0 && <span className="srv" style={w(places.server)} />}
      {places.browser > 0 && <span className="brw" style={w(places.browser)} />}
    </span>
  );
}

uses

used by