feat: ability to filter icons

src/components/IconGallery.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import styles from './IconGallery.module.scss';
 
 const IconGallery = () => {
@@ -8,27 +8,42 @@ const IconGallery = () => {
   const Icon = useMemo(() => window.__NR1_SDK__.default.Icon, [
     window?.__NR1_SDK__,
   ]);
-
-  // If we don't have the component, don't render anything
   if (!Icon) return null;
 
-  console.log('render icon gallery');
+  // Basic search / filtering
+  const [search, updateSearch] = useState('');
+  const types = Object.keys(Icon.TYPE);
+  const filteredTypes = search
+    ? types.filter((type) => type.toLowerCase().includes(search.toLowerCase()))
+    : types;
+
+  console.log('render IconGallery');
   return (
     <>
       <h2>Icon Gallery</h2>
 
       <form className={styles.iconFilter}>
-        <input type="text" name="filter" placeholder="Filter icons by name" />
+        <input
+          type="text"
+          name="filter"
+          placeholder="Filter icons by name"
+          value={search}
+          onChange={(e) => updateSearch(e.target.value)}
+        />
       </form>
 
-      <div className={styles.iconGrid}>
-        {Object.keys(Icon.TYPE).map((type, index) => (
-          <div key={index}>
-            <Icon className={styles.icon} type={Icon.TYPE[type]} />
-            <span className={styles.iconName}>{type}</span>
-          </div>
-        ))}
-      </div>
+      {filteredTypes.length ? (
+        <div className={styles.iconGrid}>
+          {filteredTypes.map((type, index) => (
+            <div key={index}>
+              <Icon className={styles.icon} type={Icon.TYPE[type]} />
+              <span className={styles.iconName}>{type}</span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div>No results for "{search}"</div>
+      )}
     </>
   );
 };

src/components/IconGallery.module.scss

@@ -1,10 +1,9 @@
 .iconFilter {
   padding: 1rem;
+  padding-left: 0;
 
   input {
     width: 60%;
-    margin: auto;
-    display: block;
     padding: 0.5rem;
   }
 }