Working on the search

src/Models/Component.js

@@ -0,0 +1,26 @@
+import categories from "./data";
+
+export default class Component {
+
+    constructor() {
+        this.categories = categories;
+    }
+
+    all() {
+        return this.categories;
+    }
+
+    whereCategory(category) {
+
+        if(this.isEmpty(category)) return this.categories;
+
+        let pattern = new RegExp(`^${category}`, 'i');
+
+        return this.categories.filter(category => category.name.match(pattern));
+    }
+
+    isEmpty(string) {
+        return string.length === 0;
+    }
+
+}

src/components/Master.vue

@@ -1,17 +1,25 @@
 <template>
     <div class="min-h-screen container mx-auto px-6">
         <div class="py-16 text-center">
-            <h1 class="text-xl md:text-2xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
+            <h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things
+                🔥</h1>
             <div class="max-w-2xl mx-auto">
                 <div>
-                    <input class="w-full bg-white mt-6 px-6 py-4 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-gray-100 placeholder-gray-700" type="text" placeholder="Search.." v-model="searchText">
+                    <input class="w-full bg-white mt-6 px-6 py-4 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-gray-100 placeholder-gray-700"
+                           type="text" placeholder="Search.." v-model="searchText">
                 </div>
-                <div class="flex items-center mt-5 flex justify-start">
+                <div class="flex flex-col md:flex-row items-center justify-start mt-5 ">
                     <span class="text-gray-700">Categories : </span>
-                    <a @click="searchText = ''" class="ml-1 text-gray-700 hover:text-gray-600 cursor-pointer font-light hover:underline">all</a>
+                    <div class="mt-2 md:mt-0">
-                    <span v-for="category in categories" :key="category.name">
+                        <button @click="searchText = ''"
-                        <a @click="searchText = category.name" class="ml-2 text-gray-700 hover:text-gray-600 cursor-pointer font-light hover:underline">{{ category.name }}</a>
+                           class="ml-1 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
-                    </span>
+                           :class="searchText.length === 0 ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">all</button>
+                        <span v-for="category in categories" :key="category.name">
+                            <button @click="searchText = category.name"
+                               class="ml-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
+                               :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -19,7 +27,8 @@
         <div class="w-full max-w-5xl mx-auto">
             <div class="mb-16" v-for="category in list" :key="category.name">
                 <h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>
-                <component v-for="component in category.components" :key="component.name" :is="component.name" class="mb-10"></component>
+                <component v-for="component in category.components" :key="component.name" :is="component.name"
+                           class="mb-10"></component>
             </div>
         </div>
     </div>
@@ -34,7 +43,7 @@
     import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
     import Login from "./UI/Forms/Login";
     import Subscribe from "./UI/Forms/Subscribe";
-    import componentList from "./../components";
+    import Component from "../Models/Component";
 
     export default {
         components: {
@@ -49,25 +58,18 @@
         },
         data() {
             return {
-                categories: componentList,
+                categories: [],
                 searchText: '',
+                component: new Component(),
             }
         },
+        created() {
+            this.categories = this.component.all();
+        },
         computed: {
             list() {
-
+                return this.component.whereCategory(this.searchText);
-                if (this.searchText.length === 0) return componentList;
-
-                return this.search(this.searchText);
             },
         },
-
-        methods: {
-            search(string) {
-                let pattern = new RegExp(`^${string}`, 'i');
-
-                return this.categories.filter(category => category.name.match(pattern));
-            }
-        },
     }
 </script>