Project card (#15)

* initial impl

* merge from main

* No more crashy

* Almost there

* fix import

* fix more imports

* Code cleanup, Fixed components, Added Tooltip

* Added Env ind and Category pages

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

lib/components/search/Categories.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="categories">
+    <slot />
+    <span
+      v-for="category in categories"
+      :key="category.name"
+      v-html="category.icon + formatCategory(category.name)"
+    />
+  </div>
+</template>
+<script setup>
+import { formatCategory } from '@/components/utils'
+</script>
+<script>
+export default {
+  name: 'Categories',
+  props: {
+    categories: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    formatCategory,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.categories {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+
+  span ::v-deep {
+    display: flex;
+    flex-direction: row;
+    color: var(--color-icon);
+    align-items: center;
+
+    svg {
+      width: 1rem;
+      margin-right: 0.2rem;
+    }
+  }
+}
+</style>