Modrinth/components/ui/search/Categories.vue
Geometrically 1f133dbcd0
Datapack support (#815)
* Shader support PR

* Make search page work

* Fix env showing

* Make moderation look reasonable

* Fix search for shaders

* Datapack support

* Make file types work + datapack inferring

* Add editing to file types

* Finish datapack file generation

* Fix bugs, make forge support work

* Fix inconsistent data pack label

* Final fixes
2022-12-29 09:59:41 -07:00

61 lines
1.0 KiB
Vue

<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 {
name: 'Categories',
props: {
categories: {
type: Array,
default() {
return []
},
},
type: {
type: String,
required: true,
},
},
computed: {
categoriesFiltered() {
return this.$tag.categories
.concat(this.$tag.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;
span ::v-deep {
display: flex;
align-items: center;
flex-direction: row;
color: var(--color-icon);
margin-right: var(--spacing-card-md);
svg {
width: 1rem;
margin-right: 0.2rem;
}
}
}
</style>