Initial

tcmts.registry.pages.Initial · #ic4fdnwo · term · runs anywhere

Someone's picture (their Bluesky profile's), or their initial in a circle of a colour of their own (the same wherever they're shown).

import type { Someone } from "#codebase/tcmts/registry";

export function Initial({ who, size }: { who: Someone; size?: "sm" | "big" }) {
  const cls = size ? `registryavatar ${size}` : "registryavatar";
  if (who.avatar)
    return (
      <img className={cls} src={who.avatar} alt="" loading="lazy" referrerPolicy="no-referrer" />
    );
  const colours = [
    "#8250df",
    "#1a7f37",
    "#0969da",
    "#cf222e",
    "#953800",
    "#bf3989",
    "#1b7c83",
    "#9a6700",
  ];
  let h = 0;
  for (const c of who.did) h = (h * 31 + c.charCodeAt(0)) >>> 0;
  return (
    <span className={cls} style={{ background: colours[h % colours.length] }} aria-hidden="true">
      {(who.handle ?? who.did.slice(8)).slice(0, 1).toUpperCase()}
    </span>
  );
}

uses

used by