RegistryFrame

tcmts.registry.pages.RegistryFrame · #3ji2kobq · term · runs anywhere

The registry's frame: its mark and name, a narrow search, who's signed in, and its tabs (Libraries is the tab of every page about libraries: one, its code, its changes, a search; Codebases, of a listed codebase's code).

import { registryMountOf } from "#codebase/tcmts/registry";
import { RegistryAccount, RegistrySearch, RegistryTabs } from "#codebase/tcmts/registry/pages";
import { at } from "#codebase/tcmts/share";
import type { ReactNode } from "react";

export function RegistryFrame({
  tab,
  title,
  children,
}: {
  tab: string;
  title: string;
  children: ReactNode;
}) {
  // (a page of mirrored code: under the tab of whose it is, titled by it)
  const m = tab === "code" ? registryMountOf(title) : undefined;
  const shown = m
    ? title === m.mount
      ? m.label
      : `${title.slice(m.mount.length + 1)} · ${m.label}`
    : title;
  return (
    <>
      <title>{`${shown} · tcm registry`}</title>
      <header className="app">
        <div className="wrap">
          <div className="bar1">
            <a className="logo" href={at("/")}>
              <span className="mark" aria-hidden="true" />
              tcm registry
            </a>
            <RegistrySearch />
            <RegistryAccount />
          </div>
          <RegistryTabs tab={tab === "code" ? (m?.tab ?? "libraries") : tab} />
        </div>
      </header>
      {children}
    </>
  );
}

uses

used by