feat: better result display
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user