Add topic search interactivity

src/components/Popup/Popup.astro

@@ -10,27 +10,33 @@ export interface Props {
 const { id, title, subtitle } = Astro.props;
 ---
 
-<script src="./popup.js"></script>
+<script src='./popup.js'></script>
 
-<div id={id} tabindex="-1" class="hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full flex items-center justify-center modal">
-    <div class="relative p-4 w-full max-w-md h-full md:h-auto">
-      <div class="relative bg-white rounded-lg shadow modal-body">
-        <button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" onclick='this.closest(".modal").classList.add("hidden")'>
-          <Icon icon="close" />
-          <span class="sr-only">Close modal</span>
+<div
+  id={id}
+  tabindex='-1'
+  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full flex items-center justify-center modal'
+>
+  <div class='relative p-4 w-full max-w-md h-full md:h-auto'>
+    <div class='relative bg-white rounded-lg shadow modal-body'>
+      <button
+        type='button'
+        class='absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center'
+        onclick='this.closest(".modal").classList.add("hidden")'
+      >
+        <Icon icon='close' />
+        <span class='sr-only'>Close modal</span>
       </button>
-        <div class="p-5">
+      <div class='p-5'>
         <h3 class='text-2xl mb-0.5 font-medium'>
-            { title }
+          {title}
         </h3>
-          <p class="mb-4 text-sm font-normal text-gray-800">
-            { subtitle }
+        <p class='mb-4 text-sm font-normal text-gray-800'>
+          {subtitle}
         </p>
 
         <slot />
       </div>
     </div>
   </div>
-  </div>
-  
-
+</div>

src/components/RoadmapHeader.astro

@@ -1,7 +1,7 @@
 ---
 import Icon from "./Icon.astro";
 import ResourcesAlert from "./ResourcesAlert.astro";
-import TopicSearch from "./TopicSearch.astro";
+import TopicSearch from "./TopicSearch/TopicSearch.astro";
 import YouTubeAlert from "./YouTubeAlert.astro";
 
 export interface Props {

src/components/TopicSearch/TopicSearch.astro

@@ -1,7 +1,9 @@
 ---
-import Icon from "./Icon.astro";
+import Icon from "../Icon.astro";
 ---
 
+<script src="./topics.js" />
+
 <div class="sm:-mb-[68px] mt-5 sm:mt-6 relative">
   <input
     autofocus

src/components/TopicSearch/topics.js

@@ -0,0 +1,31 @@
+class Topics {
+    constructor() {
+      this.onDOMLoaded = this.onDOMLoaded.bind(this);
+      this.init = this.init.bind(this);
+      this.filterTopicNodes = this.filterTopicNodes.bind(this);
+    }
+  
+    filterTopicNodes(e) {
+      const value = e.target.value.trim().toLowerCase();
+      if (!value) {
+        document.querySelectorAll(`[data-topic]`).forEach((item) => item.classList.remove('hidden'));
+        return;
+      }
+  
+      document.querySelectorAll(`[data-topic]`).forEach((item) => item.classList.add('hidden'));
+  
+      document.querySelectorAll(`[data-topic*="${value}"]`).forEach((item) => item.classList.remove('hidden'));
+    }
+  
+    onDOMLoaded() {
+      document.getElementById('search-topic-input').addEventListener('keyup', this.filterTopicNodes);
+    }
+  
+    init() {
+      window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+    }
+  }
+  
+  const topicRef = new Topics();
+  topicRef.init();
+