updates

src2/components/blocks/SearchButton.vue

@@ -0,0 +1,45 @@
+<script setup>
+    import { useMenuStore } from '../../stores/MenuStore';
+    import { useEventsStore } from '../../stores/EventsStore';
+    import { mainStore } from '../../stores/MainStore.vue';
+    import Modal from './Modal.vue';
+
+    const menuStore = useMenuStore();
+    const EventsStore = useEventsStore();
+    const MainStore = mainStore();
+</script>
+        
+<template>
+    <div class="text-center p-0">
+        <input v-model="EventsStore.search_term" type="text" id="search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 blockz p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 align-middle"/>
+        <button class="btn search mt-8 align-middle" v-on:click.prevent="EventsStore.searchEvents(EventsStore.search_term)"><img class="lens align-middle" src="/search.png"/></button>
+    </div>
+</template>
+
+<style scoped>
+input {
+border-radius: 25px;
+padding: .5rem;
+color: #000;
+}
+
+button {
+border-radius: 25px;
+padding: .5rem;
+margin: .75rem;
+background-color: orange;
+color: #000;
+font-weight: bold;
+}
+
+.search {
+  border-radius: 25px;
+  padding: .5rem 1rem;
+  margin: .5rem;
+  margin-top: 10px;
+  background-color: hsla(160, 100%, 37%, 1);
+  color: #000;
+  font-weight: bold;
+}
+
+</style>