<template>
    <div class="tags">
        <Tag
            v-for="tag in tags"
            :key="`tag-${tag.id}`"
            :tag="tag"
        />
    </div>
</template>

<script>
import Tag from '../tile/tag.vue';

async function mounted() {
    this.tags = await this.$store.dispatch('fetchTags', { priority: [9] });
}

export default {
    components: {
        Tag,
    },
    data() {
        return {
            tags: [],
        };
    },
    mounted,
};
</script>

<style lang="scss" scoped>
.tags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-gap: .5rem;
    padding: 1rem;
}
</style>
