I think I just might go insane

gauntlet.toml

@@ -15,6 +15,15 @@ description = """
 Copy emojis to your clipboard from Gauntlet!
 """
 
+[[entrypoint]]
+id = 'emojipicker-grid'
+name = 'Emoji Picker (Grid)'
+path = 'src/emojipicker-grid.tsx'
+type = 'view'
+description = """
+Copy emojis to your clipboard from Gauntlet!
+"""
+
 [permissions]
 main_search_bar = ["read"]
 clipboard = ["write"]

src/emojipicker-grid.tsx

@@ -0,0 +1,93 @@
+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>
+  );
+
+  // return (
+  //   <Inline
+  //     actions={
+  //       <ActionPanel>
+  //         <Action
+  //           label={`Copy ${emoji.emoji} to clipboard`}
+  //           onAction={async () => {
+  //             console.log(emoji.emoji);
+  //             await Clipboard.writeText(emoji.emoji);
+  //             showHud(`${emoji.emoji} copied to clipboard`);
+  //           }}
+  //         />
+  //       </ActionPanel>
+  //     }
+  //   >
+  //     <Inline.Left>
+  //       <Content.H3>{text}</Content.H3>
+  //     </Inline.Left>
+  //     <Inline.Separator icon={Icons.ArrowRight} />
+  //     <Inline.Right>
+  //       <Content.Paragraph>{emoji.emoji}</Content.Paragraph>
+  //     </Inline.Right>
+  //   </Inline>
+  // );
+}

src/emojipicker.tsx

@@ -36,7 +36,7 @@ export default function EmojiPicker(props: {
           <Action
             label={`Copy ${emoji.emoji} to clipboard`}
             onAction={async () => {
-              console.log(emoji.emoji);
+              console.log(emoji);
               await Clipboard.writeText(emoji.emoji);
               showHud(`${emoji.emoji} copied to clipboard`);
             }}