simple-fs-server/islands/DocSearch.tsx

55 lines
1.3 KiB
TypeScript
Raw Normal View History

2023-01-05 18:18:07 +09:00
import { Doc } from "../src/collect.ts";
import { useEffect, useState } from "preact/hooks";
import { Index } from "../src/client_search.ts";
2023-01-06 18:17:36 +09:00
import { encodePath } from "../util/util.ts";
2023-01-05 18:18:07 +09:00
2023-01-06 18:24:27 +09:00
function SearchBar(props: {
search?: string;
onSearch?: (search: string) => void;
}) {
const [search, setSearch] = useState(props.search ?? "");
return (
<div class="flex items-center justify-center">
<input
type="text"
class="w-1/2 px-4 py-2 border-2 rounded-lg"
placeholder="Search..."
//onChange={(event)=>{}}
onKeyUp={(event) => {
if (event.currentTarget.value === search) return;
setSearch(event.currentTarget.value);
props.onSearch?.(event.currentTarget.value);
}}
>
{search}
</input>
</div>
);
2023-01-05 18:18:07 +09:00
}
export default function DocSearch(props: {
2023-01-06 18:24:27 +09:00
docs: Doc[];
}) {
const [docs, setDocs] = useState(props.docs);
const index = Index.createIndex(props.docs);
2023-01-05 18:18:07 +09:00
2023-01-06 18:24:27 +09:00
return (
<>
<SearchBar
onSearch={(s) => {
setDocs(index.search(s));
}}
>
</SearchBar>
<h1 class="text-2xl font-bold">Doc</h1>
<ul class="mt-4">
{docs.map((doc) => (
<li class="mt-2">
<a href={`/dir/${encodePath(doc.path)}`}>{doc.path}</a>
</li>
))}
</ul>
</>
);
}