45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
|
<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>
|