Migrate to Turborepo (#1251)

apps/frontend/src/components/ui/search/Categories.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="categories">
+    <slot />
+    <span
+      v-for="category in categoriesFiltered"
+      :key="category.name"
+      v-html="category.icon + $formatCategory(category.name)"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    categories: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    const tags = useTags()
+
+    return { tags }
+  },
+  computed: {
+    categoriesFiltered() {
+      return this.tags.categories
+        .concat(this.tags.loaders)
+        .filter(
+          (x) =>
+            this.categories.includes(x.name) && (!x.project_type || x.project_type === this.type)
+        )
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.categories {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  :deep(span) {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    &:not(:last-child) {
+      margin-right: var(--spacing-card-md);
+    }
+
+    &:not(.badge) {
+      color: var(--color-icon);
+    }
+
+    svg {
+      width: 1rem;
+      margin-right: 0.2rem;
+    }
+  }
+}
+</style>

apps/frontend/src/components/ui/search/SearchFilter.vue

@@ -0,0 +1,77 @@
+<template>
+  <Checkbox
+    class="filter"
+    :model-value="activeFilters.includes(facetName)"
+    :description="displayName"
+    @update:model-value="toggle()"
+  >
+    <div class="filter-text">
+      <div v-if="icon" aria-hidden="true" class="icon" v-html="icon" />
+      <div v-else class="icon">
+        <slot />
+      </div>
+      <span aria-hidden="true"> {{ displayName }}</span>
+    </div>
+  </Checkbox>
+</template>
+
+<script>
+import Checkbox from '~/components/ui/Checkbox.vue'
+
+export default {
+  components: {
+    Checkbox,
+  },
+  props: {
+    facetName: {
+      type: String,
+      default: '',
+    },
+    displayName: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    activeFilters: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  emits: ['toggle'],
+  methods: {
+    toggle() {
+      this.$emit('toggle', this.facetName)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.filter {
+  margin-bottom: 0.5rem;
+
+  :deep(.filter-text) {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      height: 1rem;
+
+      svg {
+        margin-right: 0.25rem;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  span {
+    user-select: none;
+  }
+}
+</style>