Add search

src/views/HomeView.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="container mx-auto p-4">
+    <input
+      type="text"
+      v-model="searchQuery"
+      placeholder="Search.."
+      class="mb-4 border w-full"
+    />
+
     <div
       class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-5"
     >
       <div
-        v-for="(category, categoryName) in tools"
+        v-for="(category, categoryName) in filteredTools"
         :key="categoryName"
-        class="bg-white rounded-lg shadow-md p-4"
+        class="bg-white shadow-md p-4"
+        v-show="Object.keys(category).length > 0"
       >
         <h2 class="text-xl font-semibold mb-3">{{ categoryName }}</h2>
         <div class="max-h-80 overflow-y-auto">
@@ -31,7 +39,7 @@
     <div class="flex flex-wrap justify-center items-center gap-4 max-w-4xl">
       <a
         href="https://gist.stuzer.link/stuzer05/liked"
-        class="flex items-center w-64 p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 transition-colors duration-300"
+        class="flex items-center w-64 p-4 bg-white shadow-md hover:bg-gray-50 transition-colors duration-300"
       >
         <img
           src="https://gist.stuzer.link/assets/opengist-85b89b9c.svg"
@@ -43,7 +51,7 @@
 
       <a
         href="https://pdf.stuzer.link/"
-        class="flex items-center w-64 p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 transition-colors duration-300"
+        class="flex items-center w-64 p-4 bg-white shadow-md hover:bg-gray-50 transition-colors duration-300"
       >
         <img
           src="https://pdf.stuzer.link/favicon.svg"
@@ -59,11 +67,13 @@
 <script>
 import { useToolsStore } from "@/stores/toolsStore";
 import { useRouter } from "vue-router";
+import { computed, ref } from 'vue';
 
 export default {
   data() {
     return {
       tools: {},
+      searchQuery: ref(''),
     };
   },
   setup() {
@@ -78,7 +88,26 @@ export default {
   mounted() {
     this.tools = useToolsStore().tools;
   },
+  computed: {
+    filteredTools() {
+      const query = this.searchQuery.toLowerCase();
+      if (query) {
+        return Object.fromEntries(
+          Object.entries(this.tools).map(([categoryName, tools]) => [
+            categoryName,
+            Object.fromEntries(
+              Object.entries(tools).filter(
+                ([_, toolName]) => toolName.toLowerCase().includes(query)
+              )
+            ),
+          ])
+        );
+      } else {
+        return this.tools;
+      }
+    },
+  },
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss"></style>