Add filter feature to icon page

packages/preview/src/components/pages/icons/iconset-viewer.tsx

@@ -5,7 +5,7 @@ import React from "react";
 
 import IconsPageLoading from "./loading";
 
-export default function IconSetViewer({ icon }) {
+export default function IconSetViewer({ icon, search }) {
   const IconSet = loadable.lib(() => getIcons(icon.id));
 
   return (
@@ -14,9 +14,11 @@ export default function IconSetViewer({ icon }) {
       <IconSet fallback={<IconsPageLoading />}>
         {({ default: icons }) => (
           <div className="icons">
-            {Object.keys(icons).map((name) => (
-              <Icon key={name} icon={icons[name]} name={name} />
-            ))}
+            {Object.keys(icons)
+              .filter((name) => name.toLowerCase().includes(search))
+              .map((name) => (
+                <Icon key={name} icon={icons[name]} name={name} />
+              ))}
           </div>
         )}
       </IconSet>

packages/preview/src/components/pages/icons/index.tsx

@@ -1,6 +1,6 @@
 import Container from "@components/@core/container";
 import { getIconById } from "@utils/icon";
-import React from "react";
+import React, { useState } from "react";
 
 import IconSetImport from "./iconset-import";
 import IconSetInfo from "./iconset-info";
@@ -9,11 +9,30 @@ import IconSetViewer from "./iconset-viewer";
 export default function IconsPageComponent({ iconId }) {
   const icon = getIconById(iconId);
 
+  const [inputQuery, setInputQuery] = useState("");
+
+  const updateInputQuery = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputQuery(e.target.value);
+  };
+
   return (
     <Container title={icon.name}>
       <IconSetInfo icon={icon} />
       <IconSetImport iconId={icon.id} />
-      <IconSetViewer icon={icon} />
+      <div className="search">
+        <input
+          type="text"
+          aria-label="search"
+          className="px2 py1"
+          placeholder={`🔎 Search ${icon.name}`}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          onChange={updateInputQuery}
+        />
+      </div>
+      <IconSetViewer icon={icon} search={inputQuery} />
     </Container>
   );
 }