icon picker component

components/IconPicker.tsx

@@ -0,0 +1,46 @@
+import { icons } from "@/lib/client/icons";
+import React, { useMemo, useState } from "react";
+import Fuse from "fuse.js";
+import TextInput from "./TextInput";
+
+const fuse = new Fuse(icons, {
+  keys: [{ name: "name", weight: 4 }, "tags", "categories"],
+  threshold: 0.2,
+  useExtendedSearch: true,
+});
+
+type Props = {};
+
+const IconPicker = (props: Props) => {
+  const [query, setQuery] = useState("");
+
+  const filteredQueryResultsSelector = useMemo(() => {
+    if (!query) {
+      return icons;
+    }
+    return fuse.search(query).map((result) => result.item);
+  }, [query]);
+
+  return (
+    <div className="w-fit">
+      <TextInput
+        className="p-2 rounded w-full mb-5"
+        placeholder="Search icons"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <div className="grid grid-cols-6 gap-5 w-fit">
+        {filteredQueryResultsSelector.map((icon) => {
+          const IconComponent = icon.Icon;
+          return (
+            <div key={icon.name} onClick={() => console.log(icon.name)}>
+              <IconComponent size={32} weight="fill" />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default IconPicker;