add coach-filter

src/components/coaches/CoachFilter.vue

@@ -0,0 +1,67 @@
+<template>
+  <base-card>
+    <h2>Find Your Coach</h2>
+    <span class="filter-option">
+      <input type="checkbox" id="frontend" checked @chanced="setFilter" />
+      <label for="frontend">Frontend</label>
+    </span>
+    <span class="filter-option">
+      <input type="checkbox" id="backend" checked @chanced="setFilter" />
+      <label for="backend">Backend</label>
+    </span>
+    <span class="filter-option">
+      <input type="checkbox" id="career" checked @chanced="setFilter" />
+      <label for="career">Career</label>
+    </span>
+  </base-card>
+</template>
+
+<script>
+export default {
+  emits: ['change-filter'],
+  data() {
+    return {
+      filters: {
+        backend: true,
+        frontend: true,
+        career: true
+      }
+    };
+  },
+  methods: {
+    setFilter(event) {
+      const inputId = event.target.id;
+      const isActive = event.target.checked;
+      const updatedFilters = {
+        ...this.filters,
+        [inputId]: isActive
+      };
+      this.filters = updatedFilters;
+      this.$emit('change-filter', updatedFilters);
+    }
+  }
+};
+</script>
+
+<style scoped>
+h2 {
+  margin: 0.5rem 0;
+}
+
+.filter-option {
+  margin-right: 1rem;
+}
+
+.filter-option label,
+.filter-option input {
+  vertical-align: middle;
+}
+
+.filter-option label {
+  margin-left: 0.25rem;
+}
+
+.filter-option.active label {
+  font-weight: bold;
+}
+</style>

src/pages/coaches/CoachesList.vue

@@ -1,6 +1,6 @@
 <template>
   <section>
-    Filter
+    <coach-filter @change-filter="setFilter"></coach-filter>
   </section>
   <base-card>
     <section>
@@ -25,17 +25,44 @@
 </template>
 
 <script>
+import CoachFilter from '../../components/coaches/CoachFilter.vue';
 import CoachItem from '../../components/coaches/CoachItem.vue';
 
 export default {
-  components: { CoachItem },
+  components: { CoachItem, CoachFilter },
+  data() {
+    return {
+      activeFilters: {
+        backend: true,
+        frontend: true,
+        career: true
+      }
+    };
+  },
   computed: {
     filteredCoaches() {
-      return this.$store.getters['coaches/coaches'];
+      const coaches = this.$store.getters['coaches/coaches'];
+      return coaches.filter(coach => {
+        if (this.activeFilters.backend && coach.areas.includes('backend')) {
+          return true;
+        }
+        if (this.activeFilters.frontend && coach.areas.includes('frontend')) {
+          return true;
+        }
+        if (this.activeFilters.career && coach.areas.includes('career')) {
+          return true;
+        }
+        return false;
+      });
     },
     hasCoaches() {
       return this.$store.getters['coaches/hasCoaches'];
     }
+  },
+  methods: {
+    setFilter(updatedFilters) {
+      this.activeFilters = updatedFilters;
+    }
   }
 };
 </script>