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/pages/Chapters.tsx

@@ -1,22 +1,35 @@
-import { Link } from "@tanstack/react-router";
-import { useEffect } from "react";
-import { chapters, pad } from "../data";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { pad, search } from "../data";
+import { Find } from "../Find";
 
 export function Chapters() {
+  const [query, setQuery] = useState("");
+  const navigate = useNavigate();
+  const found = search(query);
   useEffect(() => {
     document.title = "Components · Ely";
   }, []);
+  const first = () => found[0] && navigate({ to: "/components/$page/$story/", params: { page: found[0].slug, story: found[0].stories[0].slug } });
   return (
     <section className="chapters">
-      <h1>Components</h1>
+      <h1>Components.</h1>
+      <Find className="find" query={query} onQuery={setQuery} onEnter={first} />
+      {found.length === 0 && <p className="none">Nothing matches “{query}”.</p>}
       <ol>
-        {chapters.map((c) => (
+        {found.map((c) => (
           <li key={c.slug}>
-            <Link to="/components/$page/$story/" params={{ page: c.slug, story: c.stories[0].slug }}>
-              <span className="n">{pad(c.number)}</span>
-              <span className="name">{c.title}</span>
-              <span className="count">{c.stories.length}</span>
+            <span className="n">{pad(c.number)}</span>
+            <Link className="name" to="/components/$page/$story/" params={{ page: c.slug, story: c.stories[0].slug }}>
+              {c.title}
             </Link>
+            <span className="titles">
+              {c.stories.map((s) => (
+                <Link key={s.slug} to="/components/$page/$story/" params={{ page: c.slug, story: s.slug }}>
+                  {s.title}
+                </Link>
+              ))}
+            </span>
           </li>
         ))}
       </ol>