T45d Site · Components: one search over chapters, stories and components (Slash, Enter, Escape), the index in hairline rows, the story beside a sticky chapter rail, arrows between stories

frontend/src/Find.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react";
+import { componentCount } from "./data";
+
+/** The search field; Slash focuses it, Enter takes the first match. */
+export function Find({ query, onQuery, onEnter, className }: { query: string; onQuery: (q: string) => void; onEnter: () => void; className: string }) {
+  const field = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const slash = (e: KeyboardEvent) => {
+      if (e.key !== "/" || e.metaKey || e.ctrlKey || typing(e)) return;
+      e.preventDefault();
+      field.current?.focus();
+    };
+    addEventListener("keydown", slash);
+    return () => removeEventListener("keydown", slash);
+  }, []);
+  return (
+    <input
+      ref={field}
+      className={className}
+      type="search"
+      placeholder={`Search ${componentCount} components`}
+      aria-label="Search components"
+      value={query}
+      onChange={(e) => onQuery(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") onEnter();
+        if (e.key === "Escape") onQuery("");
+      }}
+    />
+  );
+}
+
+/** Whether a key went to a field, not the page. */
+export function typing(e: KeyboardEvent): boolean {
+  const t = e.target as HTMLElement;
+  return t.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(t.tagName);
+}