traxxx/assets/components/tags/tags.vue

<template>
	<div class="tags">
		<div
			v-for="(tags, category) in categories"
			:key="category"
			class="category"
		>
			<h3 class="heading">{{ category }}</h3>

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

		<Footer />
	</div>
</template>

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

function sfw() {
	return this.$store.state.ui.sfw;
}

async function mounted() {
	const tagSlugsByCategory = {
		popular: [
			'anal',
			'lesbian',
			'interracial',
			'mff',
			'mfm',
			'teen',
			'milf',
			'blowjob',
			'dp',
			'gangbang',
			'facial',
			'creampie',
			'squirting',
		],
		appearance: [
			'asian',
			'black',
			'latina',
			'white',
			'natural-boobs',
			'fake-boobs',
			'blonde',
			'brunette',
			'redhead',
			'tattoos',
			'piercings',
		],
		oral: [
			'blowjob',
			'pussy-eating',
			'ass-eating',
			'69',
			'double-blowjob',
			'deepthroat',
			'facefucking',
			'atm',
		],
		manual: [
			'handjob',
			'fingering',
			'anal-fingering',
			'titty-fucking',
			'fisting',
			'anal-fisting',
			'fisting-dp',
		],
		group: [
			'mfm',
			'mff',
			'orgy',
			'gangbang',
			'blowbang',
		],
		cumshot: [
			'facial',
			'creampie',
			'cum-in-mouth',
			'cum-on-boobs',
			'cum-on-butt',
			'cum-on-pussy',
			'anal-creampie',
			'oral-creampie',
			'bukkake',
			'fake-cum',
		],
		toys: [
			'toys',
			'toy-anal',
			'toy-dp',
			'double-dildo',
			'double-dildo-blowjob',
			'double-dildo-kiss',
			'double-dildo-anal',
			'double-dildo-dp',
		],
		roleplay: [
			'family',
			'parody',
			'schoolgirl',
			'nurse',
			'maid',
			'nun',
		],
		fetish: [
			'bdsm',
			'femdom',
			'bondage',
			'latex',
			'blindfold',
		],
		extreme: [
			'dp',
			'airtight',
			'dap',
			'dvp',
			'da-tp',
			'dv-tp',
			'tap',
		],
		misc: [
			'gaping',
			'squirting',
			'oil',
			'bts',
		],
	};

	const tags = await this.$store.dispatch('fetchTags', {
		slugs: Object.values(tagSlugsByCategory).flat(),
	});

	const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});

	this.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => ({
		...acc,
		[category]: tagSlugs.map(tagSlug => tagsBySlug[tagSlug]),
	}), {});

	this.pageTitle = 'Tags';
}

export default {
	components: {
		Tag,
	},
	data() {
		return {
			categories: {},
			pageTitle: null,
		};
	},
	computed: {
		sfw,
	},
	mounted,
};
</script>

<style lang="scss" scoped>
@import 'theme';

.tags {
    padding: 1rem 1rem 0 1rem;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
    grid-gap: 1rem;
    margin: 0 0 1.5rem 0;
}

.heading {
    text-transform: capitalize;
	padding: 0 0 0 .5rem;
	margin: 2rem 0 1rem 0;
}

.category:first-child .heading {
	margin: .5rem 0 1rem 0;
}

@media(max-width: $breakpoint3) {
    .tiles {
        grid-template-columns: repeat(auto-fill, minmax(18rem, .5fr));
    }
}

@media(max-width: $breakpoint) {
    .tiles {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
		grid-gap: .5rem;
    }
}

@media(max-width: $breakpoint0) {
    .tiles {
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    }
}
</style>