feat: better result display

This commit is contained in:
2025-03-08 15:42:16 +00:00
parent 863716c096
commit 1bc1b79042

View File

@ -30,6 +30,7 @@ function App() {
});
const onInputChange = (query: string) => {
// TODO: we can migrate this searching to Rust, so we don't abuse the main thread.
const searched = fuze.search(query).flatMap(s => s.item).flatMap(s => s.Text ?? []);
setSearchResults(searched);
}
@ -56,7 +57,7 @@ function App() {
<Search.Item
item={props.item}
class={clsx(
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-full box-border",
"hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none",
)}
>
@ -89,7 +90,7 @@ function App() {
class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
onCloseAutoFocus={(e) => e.preventDefault()}
>
<Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
<Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-col justify-start gap-1.5 leading-none focus:outline-none" />
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
😬 No emoji found
</Search.NoResult>