filter

src/components/IssueFilter.vue

@@ -1,33 +1,22 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-
-const text = ref<string | null>(null)
-
-async function onSearch() {
-  console.log('search')
-}
+import AssigneeFilter from '@/components/AssigneeFilter.vue'
+import AssigneeFilterAvatar from '@/components/AssigneeFilterAvatar.vue'
+import TextFilter from '@/components/TextFilter.vue'
 </script>
 
 <template>
-  <div class="u-grid2 ga-2">
-    <v-text-field
-      v-model="text"
-      clearable
-      placeholder="Search name..."
-      @keydown.enter.prevent="onSearch"
-      @click:clear="onSearch"
-    />
-    <v-select variant="outlined" clearable :items="['abc', 'def']"></v-select>
-
-    <!--    <v-btn>filter</v-btn>-->
-
-    <!--    <v-btn variant="plain">clear filters</v-btn>-->
+  <div class="u-grid2 ga-1 align-center">
+    <text-filter />
+    <assignee-filter />
+    <assignee-filter-avatar />
+    <v-btn variant="text">clear filters</v-btn>
   </div>
 </template>
 
 <style scoped lang="scss">
 .u-grid2 {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: 1fr 10rem auto auto;
 }
 </style>