MapViewSwitch

tcmts.share.MapViewSwitch · #4dbyg54m · component · runs in the browser

handles onClick

The front page map's switch between its list and its graph: links (path, and with ?view=graph) that keep the page where it's scrolled to, as the map changes under them.

import { navigate } from "#codebase/tcmts/react";
import { at } from "#codebase/tcmts/share";
import type { MouseEvent } from "react";

export function MapViewSwitch({ graph, path }: { graph: boolean; path: string }) {
  const go = (e: MouseEvent<HTMLAnchorElement>) => {
    // (a link opened elsewhere, as ever)
    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
    e.preventDefault();
    navigate(e.currentTarget.getAttribute("href")!, { scroll: false });
  };
  return (
    <span className="seg">
      <a
        className="btn small"
        href={at(path)}
        onClick={go}
        data-selected={!graph || undefined}
        aria-current={graph ? undefined : "page"}
      >
        List
      </a>
      <a
        className="btn small"
        href={at(`${path}?view=graph`)}
        onClick={go}
        data-selected={graph || undefined}
        aria-current={graph ? "page" : undefined}
      >
        Graph
      </a>
    </span>
  );
}

uses

used by