From 9aa0c6118f4c2b04dc6e6b4f4e892a1b11007827 Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Mon, 29 Mar 2021 07:58:50 -0400
Subject: [PATCH] Add a search field in vocabulary page.

---
 index.html                    |  2 +-
 lib/pages/vocabulary-page.tsx | 22 ++++++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 7b59572..621c6f3 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@ html, body {
   font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
 }
 
-select {
+select, input[type="text"] {
   padding: 8px;
 }
 
diff --git a/lib/pages/vocabulary-page.tsx b/lib/pages/vocabulary-page.tsx
index 5ca9a47..e625d85 100644
--- a/lib/pages/vocabulary-page.tsx
+++ b/lib/pages/vocabulary-page.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { dilateBoundingBox, getBoundingBoxSize } from "../bounding-box";
 import {
   createSvgSymbolContext,
@@ -38,13 +38,31 @@ const SvgSymbol: React.FC<SvgSymbolProps> = (props) => {
 
 export const VocabularyPage: React.FC<{}> = () => {
   const [ctx, setCtx] = useState(createSvgSymbolContext());
+  const [filter, setFilter] = useState("");
+  const finalFilter = filter.toLowerCase().replace(/ /g, "_");
+  const items = useMemo(
+    () =>
+      SvgVocabulary.items.filter((item) =>
+        item.name.toLowerCase().includes(finalFilter)
+      ),
+    [finalFilter]
+  );
 
   return (
     <>
       <h1>Mystic Symbolic Vocabulary</h1>
+      <div className="thingy">
+        <label htmlFor="filter">Search: </label>
+        <input
+          type="text"
+          id="filter"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
       <SymbolContextWidget ctx={ctx} onChange={setCtx} />
       <HoverDebugHelper>
-        {SvgVocabulary.items.map((symbolData) => (
+        {items.map((symbolData) => (
           <div
             key={symbolData.name}
             style={{