39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
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>
|
|
<Find className="find" query={query} onQuery={setQuery} onEnter={first} />
|
|
{found.length === 0 && <p className="none">Nothing matches “{query}”.</p>}
|
|
<ol>
|
|
{found.map((c) => (
|
|
<li key={c.slug}>
|
|
<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.name}
|
|
</Link>
|
|
))}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
);
|
|
}
|