44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
|
import { Doc } from "../src/collect.ts";
|
||
|
|
import { useEffect, useState } from "preact/hooks";
|
||
|
|
import { Index } from "../src/client_search.ts";
|
||
|
|
|
||
|
|
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>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function DocSearch(props: {
|
||
|
|
docs: Doc[]
|
||
|
|
}){
|
||
|
|
const [docs, setDocs] = useState(props.docs);
|
||
|
|
const index = Index.createIndex(props.docs);
|
||
|
|
|
||
|
|
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/${doc.path}`}> {doc.path}</a>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|