page.tsx72 lines · main

1	import Link from 'next/link';
2
3	import { DocsShell } from '../../components/shell';
4	import { searchDocs } from '../../lib/docs-corpus';
5
6	export const metadata = { title: 'docs search' };
7	export const dynamic = 'force-dynamic';
8
9	export default async function SearchPage({
10	searchParams,
11	}: {
12	searchParams: Promise<{ q?: string }>;
13	}) {
14	const { q } = await searchParams;
15	const query = q?.trim() ?? '';
16	const results = query.length > 0 ? searchDocs(query, 10) : [];
17
18	return (
19	<DocsShell>
20	<h1 className="font-mono text-2xl tracking-tight">search docs</h1>
21	<p className="mt-2 font-mono text-sm text-[var(--color-text-muted)]">
22	keyword search across every docs page. an AI-assisted answer surface lights up once the
23	ollama backend is wired — until then, the keyword match below is the way.
24	</p>
25
26	<form method="get" className="mt-6 flex gap-2">
27	<input
28	name="q"
29	type="search"
30	defaultValue={query}
31	placeholder="how do I make a query reactive?"
32	autoFocus
33	className="flex-1 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 font-mono text-sm outline-none focus:border-[var(--color-primary)]"
34	/>
35	<button
36	type="submit"
37	className="rounded-md bg-[var(--color-primary)] px-4 py-2 font-mono text-sm font-medium text-[var(--color-text-inverse)] hover:bg-[var(--color-primary-hover)]"
38	>
39	search
40	</button>
41	</form>
42
43	{query.length > 0 ? (
44	results.length === 0 ? (
45	<p className="mt-8 font-mono text-sm text-[var(--color-text-muted)]">
46	no pages matched <code>{query}</code>. try a broader term, or open an issue —
47	missing-doc reports are how the corpus grows.
48	</p>
49	) : (
50	<ul className="mt-8 flex flex-col gap-4">
51	{results.map((r) => (
52	<li key={r.slug}>
53	<Link
54	href={r.slug}
55	className="block rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-4 hover:border-[var(--color-border)]"
56	>
57	<p className="font-mono text-sm text-[var(--color-text)]">{r.title}</p>
58	<p className="mt-1 font-mono text-xs text-[var(--color-text-subtle)]">
59	{r.slug}
60	</p>
61	<p className="mt-2 font-mono text-xs text-[var(--color-text-muted)]">
62	{r.summary}
63	</p>
64	</Link>
65	</li>
66	))}
67	</ul>
68	)
69	) : null}
70	</DocsShell>
71	);
72	}