Implement search

feathericons · Aug 20, 2023 · 7a216c9 · 7a216c9
1 parent 309224d
commit 7a216c9
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 24 deletions.
diff --git a/docs/src/components/icon-grid.tsx b/docs/src/components/icon-grid.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import iconsJson from '../../../dist/icons.json';
+import tagsJson from '../../../src/tags.json';
+
+const icons = Object.entries(iconsJson).map(([name, svg]) => {
+  const tags: Array<string> = tagsJson[name] || [];
+  return { name, svg, tags };
+});
+
+export function IconGrid() {
+  const [query, setQuery] = React.useState(() => {
+    if (typeof window !== 'undefined') {
+      return new URLSearchParams(window.location.search).get('query') || '';
+    }
+
+    return '';
+  });
+
+  const deferredQuery = React.useDeferredValue(query);
+
+  // Sync the query to the URL
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const url = new URL(window.location.href);
+
+      if (query) {
+        url.searchParams.set('query', query);
+      } else {
+        url.searchParams.delete('query');
+      }
+
+      window.history.replaceState({}, '', url.toString());
+    }
+  }, [query]);
+
+  const results = React.useMemo(() => {
+    if (!deferredQuery) {
+      return icons;
+    }
+
+    return icons.filter(name => {
+      return (
+        name.name.toLowerCase().includes(deferredQuery.toLowerCase()) ||
+        name.tags.some(tag =>
+          tag.toLowerCase().includes(deferredQuery.toLowerCase()),
+        )
+      );
+    });
+  }, [deferredQuery]);
+
+  const searchRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    function handleKeydown(event: KeyboardEvent) {
+      if (!searchRef.current) return;
+
+      if (event.key === '/') {
+        event.preventDefault();
+        searchRef.current.focus();
+      }
+    }
+
+    console.log('adding event listener');
+
+    window.addEventListener('keydown', handleKeydown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeydown);
+    };
+  }, []);
+
+  return (
+    <div>
+      <input
+        ref={searchRef}
+        className="w-full bg-bg px-4 py-3 border-b border-border sticky top-0 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-border-focus [&::-webkit-search-cancel-button]:appearance-none"
+        type="search"
+        placeholder={`Search ${icons.length} icons...`}
+        value={query}
+        onChange={event => setQuery(event.target.value)}
+      />
+      <ul className="grid grid-cols-[repeat(auto-fill,minmax(4rem,1fr))]">
+        {results.map(icon => {
+          return (
+            <li className="w-full aspect-square grid place-items-center">
+              <svg
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                dangerouslySetInnerHTML={{ __html: icon.svg }}
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/docs/src/index.css b/docs/src/index.css
@@ -0,0 +1,17 @@
+:root {
+  color-scheme: light dark;
+
+  --color-text: #000;
+  --color-bg: #fff;
+  --color-border: #ccc;
+  --color-border-focus: #0d99ff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text: #eeee;
+    --color-bg: #111;
+    --color-border: #333;
+    --color-border-focus: #0c8ce9;
+  }
+}
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -1,31 +1,12 @@
 ---
-import icons from '../../../dist/icons.json';
+import '../index.css';
+import { IconGrid } from '../components/icon-grid';
 ---
 
 <html>
-  <body>
+  <body class="text-text bg-bg">
     <main>
-      <ul class="grid grid-cols-[repeat(auto-fill,minmax(4rem,1fr))]">
-        {
-          Object.entries(icons).map(([name, svg]) => {
-            return (
-              <li class="w-full aspect-square grid place-items-center">
-                <svg
-                  viewBox="0 0 24 24"
-                  width="24"
-                  height="24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  set:html={svg}
-                />
-              </li>
-            );
-          })
-        }
-      </ul>
+      <IconGrid client:load />
     </main>
   </body>
 </html>
diff --git a/docs/tailwind.config.cjs b/docs/tailwind.config.cjs
@@ -2,7 +2,14 @@
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
-    extend: {},
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      text: 'var(--color-text)',
+      bg: 'var(--color-bg)',
+      border: 'var(--color-border)',
+      'border-focus': 'var(--color-border-focus)',
+    },
   },
   plugins: [],
 };