56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
|
import Link from "next/link";
|
||
|
|
import { keywordSearch } from "@mcpedia/core";
|
||
|
|
|
||
|
|
export default async function SearchPage({
|
||
|
|
searchParams,
|
||
|
|
}: {
|
||
|
|
searchParams: Promise<{ q?: string }>;
|
||
|
|
}) {
|
||
|
|
const { q } = await searchParams;
|
||
|
|
const query = q?.trim() ?? "";
|
||
|
|
const hits = query ? await keywordSearch(query, 30) : [];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<h1 className="text-2xl font-semibold tracking-tight">Search</h1>
|
||
|
|
<form method="get" className="flex gap-2">
|
||
|
|
<input
|
||
|
|
name="q"
|
||
|
|
defaultValue={query}
|
||
|
|
placeholder="e.g. websocket contract typescript"
|
||
|
|
className="flex-1 rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-3 py-2 text-sm"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="rounded bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900 px-4 py-2 text-sm font-medium"
|
||
|
|
>
|
||
|
|
Search
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
{query && hits.length === 0 && (
|
||
|
|
<p className="text-sm text-zinc-500">No results for “{query}”.</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<ul className="space-y-3">
|
||
|
|
{hits.map((h) => (
|
||
|
|
<li
|
||
|
|
key={h.doc.slug}
|
||
|
|
className="rounded border border-zinc-200 dark:border-zinc-800 p-3"
|
||
|
|
>
|
||
|
|
<Link
|
||
|
|
href={`/${h.doc.section}/${h.doc.slug}`}
|
||
|
|
className="font-medium hover:underline"
|
||
|
|
>
|
||
|
|
{h.doc.title}
|
||
|
|
</Link>
|
||
|
|
<p
|
||
|
|
className="text-sm text-zinc-600 dark:text-zinc-400 mt-1"
|
||
|
|
dangerouslySetInnerHTML={{ __html: h.snippet }}
|
||
|
|
/>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|