SearchFilters

tcmts.registry.pages.SearchFilters · #iosw7r7p · term · runs in the browser

handles onChange

The search's filters, for what tcm works out from the code (what it reaches, where it runs) and what people say (reviews), as checkboxes (React Aria's, as the forge's are), and the legend for where code runs. Changing one searches again.

import { navigate } from "#codebase/tcmts/react";
import { Legend, searchHref } from "#codebase/tcmts/registry/pages";
import type { SearchAsked } from "#codebase/tcmts/registry/pages";
import { Checkbox, CheckboxGroup } from "react-aria-components";

export function SearchFilters({ q, asked }: { q: string; asked: SearchAsked }) {
  const kinds = ["pure", "reviewed", "browser"] as const;
  const box = (k: (typeof kinds)[number], label: string) => (
    <Checkbox value={k} className="check">
      <span className="check-box" aria-hidden="true">
        <svg viewBox="0 0 12 12">
          <path d="M2.5 6.5l2.2 2.2L9.5 3.8" />
        </svg>
      </span>
      {label}
    </Checkbox>
  );
  return (
    <div className="searchopts">
      <CheckboxGroup
        aria-label="Only what"
        className="checkrow"
        value={kinds.filter((k) => asked[k])}
        onChange={(v) =>
          navigate(
            searchHref(q, {
              ...asked,
              pure: v.includes("pure"),
              reviewed: v.includes("reviewed"),
              browser: v.includes("browser"),
            }),
          )
        }
      >
        {box("pure", "reaches nothing outside itself")}
        {box("reviewed", "reviewed")}
        {box("browser", "runs in the browser")}
      </CheckboxGroup>
      <span className="right">
        <Legend />
      </span>
    </div>
  );
}

uses

used by