feat: search bar

src/components/FileUploader.vue

@@ -11,7 +11,7 @@
     >
         <p>Drag & drop a file here</p>
         <p class="or">or</p>
-        <v-btn depressed>upload manually</v-btn>
+        <v-btn depressed>select a file</v-btn>
         <p class="or">or</p>
         <v-text-field outlined dense label="Paste an url to the file" hide-details></v-text-field>
     </div>

src/components/SearchBar.vue

@@ -0,0 +1,44 @@
+<template>
+    <v-autocomplete
+            label="Search..."
+            single-line
+            append-icon="fa-search"
+            color="white"
+            hide-details
+            :items="items"
+            item-text="component.name"
+            item-value="path"
+            solo-inverted
+            @change="choose"
+    >
+        <template v-slot:no-data>
+            <v-list-item>
+                <v-list-item-title>
+                    Search for the <strong>tool</strong> you need!
+                </v-list-item-title>
+            </v-list-item>
+        </template>
+    </v-autocomplete>
+</template>
+
+<script>
+
+    import {toolsRoutes} from '../router'
+
+    export default {
+        name: "SearchBar",
+        data(){
+            const vm = this;
+            return {
+                items:toolsRoutes,
+                choose(path){
+                    vm.$router.push(path)
+                }
+            }
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>