68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import { Grid } from "@project-gauntlet/api/components";
|
|
import React, { ReactNode, useState } from "react";
|
|
import { Clipboard, showHud } from "@project-gauntlet/api/helpers";
|
|
import {
|
|
GroupedBy,
|
|
BaseEmoji,
|
|
getEmojis,
|
|
getEmojisGroupedBy,
|
|
} from "unicode-emoji";
|
|
|
|
// @ts-expect-error gauntlet uses deno and not node
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const denoCore: DenoCore = Deno[Deno.internal].core;
|
|
|
|
export default function EmojiPicker(): ReactNode | undefined {
|
|
const [searchText, setSearchText] = useState<string | undefined>("");
|
|
|
|
let emojiList: BaseEmoji[] | Record<GroupedBy, BaseEmoji[]>;
|
|
let isCategory = null;
|
|
if (searchText) {
|
|
emojiList = getEmojis().filter((emoji) =>
|
|
emoji.keywords.some((keyword) => keyword.includes(searchText)),
|
|
);
|
|
isCategory = false;
|
|
} else {
|
|
emojiList = getEmojisGroupedBy("category");
|
|
isCategory = true;
|
|
}
|
|
|
|
return (
|
|
<Grid>
|
|
<Grid.SearchBar
|
|
placeholder={"Search for an emoji"}
|
|
value={searchText}
|
|
onChange={setSearchText}
|
|
/>
|
|
{isCategory
|
|
? Object.entries(emojiList).map(([category, emojis]) => (
|
|
<Grid.Section key={category} title={category}>
|
|
{emojis.map((emoji: BaseEmoji) => (
|
|
<Grid.Item
|
|
key={emoji.emoji}
|
|
title={emoji.emoji}
|
|
subtitle={emoji.keywords.join(", ")}
|
|
onClick={async () => {
|
|
console.log(emoji);
|
|
await Clipboard.writeText(emoji.emoji);
|
|
showHud(`${emoji.emoji} copied to clipboard`);
|
|
}}
|
|
/>
|
|
))}
|
|
</Grid.Section>
|
|
))
|
|
: (emojiList as BaseEmoji[]).map((emoji: BaseEmoji) => (
|
|
<Grid.Item
|
|
key={emoji.emoji}
|
|
title={emoji.emoji}
|
|
subtitle={emoji.keywords.join(", ")}
|
|
onClick={async () => {
|
|
console.log(emoji);
|
|
await Clipboard.writeText(emoji.emoji);
|
|
showHud(`${emoji.emoji} copied to clipboard`);
|
|
}}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
);
|
|
}
|