Add FilterBar component to Instruments page

client/src/components/instruments/FilterBar.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="filter-bar">
+    <div class="filter-bar__input-wrapper">
+      <input
+        class="filter-bar__search-input"
+        type="text"
+        :value="searchText"
+        @input="debouncedUpdate"
+        placeholder="Suchbegriff eingeben..."
+      />
+      <NoteIcon class="filter-bar__search-icon"></NoteIcon> <!-- Font Awesome search icon as an example -->
+    </div>
+    <pill-radio-buttons
+        :selectableItems="languageOptions"
+        :defaultSelectedItem="initialLanguage"
+        class="filter-bar__language-selection"
+        @update:selectedItem="item => selectedLanguage = item"/>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import NoteIcon from "@/components/icons/NoteIcon.vue";
+import PillRadioButtons from "@/components/ui/PillRadioButtons.vue";
+
+const props = defineProps({
+  searchText: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['filter']);
+
+  const languageOptions: Array<{ id: number, label: string }> = ref([
+    {id: 1, label: 'De'},
+    {id: 2, label: 'Fr'},
+    {id: 3, label: 'En'}
+  ])
+  const initialLanguage = languageOptions.value[0]
+
+
+const searchText = ref(props.searchText);
+
+watchEffect(() => {
+  searchText.value = props.searchText;
+});
+
+const updateSearchText = (searchText: string) => {
+  console.log('filter', searchText);
+  emit('filter', searchText);
+};
+
+// Apply debounce to the input event handler
+const debouncedUpdate = debounce((event: Event) => {
+  const inputElement = event.target as HTMLInputElement;
+  updateSearchText(inputElement.value);
+}, 200);
+
+// Debounce function
+function debounce(func: Function, delay: number): Function {
+  let timeoutId: number | null = null;
+  return (...args: any[]) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+}
+</script>
+
+<style  scoped lang="scss">
+  @import 'styles/helpers';
+
+  .filter-bar{
+    display: flex;
+    margin-bottom: $medium-spacing;
+
+     &__input-wrapper {
+    position: relative;
+    width: 400px;
+    max-width: 500px;
+  }
+
+  &__search-input {
+    width: 100%;
+    padding: 1rem;
+    padding-left: 2.5rem;  // Adjusted padding to account for the icon
+    border-radius: $input-border-radius;
+    border: 1px solid $color-silver;
+    font-size: 1rem;
+  }
+
+  &__search-icon {
+    position: absolute;
+    right: 1rem;  // Positioning the icon to the left
+    top: 50%;
+    transform: translateY(-50%); // Vertically centering the icon
+    font-size: 1rem;  // Adjust as needed
+    color: $color-silver;  // Adjust as needed
+  }
+
+    &__language-selection {
+      margin-left: auto;
+
+    }
+  }
+/* You can add styles specific to this component here */
+</style>

client/src/pages/instrumentOverview.vue

@@ -10,6 +10,8 @@
       v-else
     />
     <div class="instrument-overview__list">
+      <FilterBar>
+      </FilterBar>
       <router-link
         :to="{ name: 'instrument', params: { slug: instrument.slug } }"
         data-cy="instrument"
@@ -27,9 +29,11 @@ import InstrumentFilter from '@/components/instruments/InstrumentFilter.vue';
 import InstrumentEntry from '@/components/instruments/InstrumentEntry.vue';
 import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+import FilterBar from "@/components/instruments/FilterBar.vue";
 
 export default {
   components: {
+    FilterBar,
     InstrumentFilter,
     InstrumentEntry,
   },