91 lines
3.7 KiB
TypeScript
91 lines
3.7 KiB
TypeScript
import { createSignal } from "solid-js";
|
|
import { Search } from "@kobalte/core/search";
|
|
import { IconSearch, IconRefresh } from "@tabler/icons-solidjs";
|
|
import clsx from "clsx";
|
|
|
|
type Emoji = {
|
|
emoji: string;
|
|
name: string;
|
|
};
|
|
|
|
function App() {
|
|
const [options, setOptions] = createSignal<Emoji[]>([]);
|
|
const [emoji, setEmoji] = createSignal<Emoji | null>(null);
|
|
|
|
const emojiData: Emoji[] = [
|
|
{ emoji: "😀", name: "Grinning Face" },
|
|
{ emoji: "😃", name: "Grinning Face with Big Eyes" },
|
|
{ emoji: "😄", name: "Grinning Face with Smiling Eyes" },
|
|
{ emoji: "😁", name: "Beaming Face with Smiling Eyes" },
|
|
{ emoji: "😆", name: "Grinning Squinting Face" },
|
|
];
|
|
|
|
const queryEmojiData = (query: string) => {
|
|
return emojiData.filter((emoji) =>
|
|
emoji.name.toLowerCase().includes(query.toLowerCase())
|
|
);
|
|
};
|
|
|
|
return (
|
|
<main class="container px-4 pt-2 pb-4">
|
|
<Search
|
|
triggerMode="focus"
|
|
options={options()}
|
|
onInputChange={(query) => setOptions(queryEmojiData(query))}
|
|
onChange={(result) => setEmoji(result)}
|
|
optionValue="name"
|
|
optionLabel="name"
|
|
placeholder="Search an emoji…"
|
|
itemComponent={(props) => (
|
|
<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",
|
|
"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"
|
|
)}
|
|
>
|
|
<Search.ItemLabel class="mx-[-100px]">
|
|
{props.item.rawValue.emoji}
|
|
</Search.ItemLabel>
|
|
</Search.Item>
|
|
)}
|
|
>
|
|
<Search.Control
|
|
class="inline-flex justify-between w-full rounded-md text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid::border-red-500 ui-invalid::text-red-500"
|
|
aria-label="Emoji"
|
|
>
|
|
<Search.Indicator
|
|
class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 bg-gray-100 border-r border-gray-200 text-gray-900 text-base leading-none transition-colors duration-250"
|
|
loadingComponent={
|
|
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
|
<IconRefresh class="m-auto animate-spin" />
|
|
</Search.Icon>
|
|
}
|
|
>
|
|
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
|
<IconSearch class="m-auto" />
|
|
</Search.Icon>
|
|
</Search.Indicator>
|
|
<Search.Input class="appearance-none inline-flex w-full min-h-[40px] pl-4 text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
|
|
</Search.Control>
|
|
<Search.Portal>
|
|
<Search.Content
|
|
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.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
|
|
😬 No emoji found
|
|
</Search.NoResult>
|
|
</Search.Content>
|
|
</Search.Portal>
|
|
</Search>
|
|
<div class="mt-4 text-base leading-none">
|
|
Emoji selected: {emoji()?.emoji} {emoji()?.name}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default App;
|