added search functionality

RobBrazier · Aug 12, 2023 · 1316b29 · 1316b29
1 parent ffbe93c
commit 1316b29
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/css/global.css b/src/css/global.css
@@ -151,3 +151,10 @@ footer a:hover {
     text-align: center;
   }
 }
+
+input[type=text]{
+  border-radius: 0.5em;
+  margin: 0.5em;
+  padding: 0.5em;
+  border-color: #2c3e50;
+}
diff --git a/src/routes/icons/+page.svelte b/src/routes/icons/+page.svelte
@@ -5,7 +5,7 @@
 
 <main>
   <h1>Available Font-Awesome v4 Icons</h1>
-
+  <input type="text" name="search" placeholder="Search Icon" on:input={(e) => debounce(e.currentTarget.value)}>
   <table>
     <thead>
       <tr>
@@ -15,7 +15,7 @@
         <th>Example Snippet</th>
       </tr>
     </thead>
-    {#each data as icon}
+    {#each filteredIcons as icon}
       <tr>
         <td><Icon data={getIcon(icon.fileName)} scale={5} /></td>
         <td>{icon.fileName}</td>
@@ -52,4 +52,15 @@
   function getIcon(name: string): IconType {
     return (icons as Record<string, IconType>)[name];
   }
+  
+  let searchValue = '';
+  let timer : number;
+  const debounce = (v : string) => {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			searchValue = v;
+		}, 750);
+	}
+
+  $: filteredIcons = data.filter(icon => icon.iconName.toLowerCase().startsWith(searchValue))
 </script>