Initial commit

frontend/src/components/Inputs/SearchField.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { Debounce } from '@/utils/debounce';
+
+  type Emits = {
+    (e: 'onSearch', value: string): void,
+  };
+
+  const emit = defineEmits<Emits>();
+
+  const searchContent = ref('');
+
+  const debounce = new Debounce();
+  watch(searchContent, () => debounce.debounce(() => emit('onSearch', searchContent.value), 200));
+</script>
+
+<template>
+  <v-text-field
+    variant="solo"
+    label="Search beer"
+    append-inner-icon="mdi-magnify"
+    single-line
+    hide-details
+    v-model="searchContent"
+  />
+</template>
+
+<style scoped>
+
+</style>