traxxx-web/components/scenes/scenes.vue

<template>
	<div class="page">
		<nav class="scopes">
			<Link
				href="/updates/latest"
				class="scope nolink"
				:active="scope === 'latest'"
			>Latest</Link>

			<Link
				href="/updates/upcoming"
				class="scope nolink"
				:active="scope === 'upcoming'"
			>Upcoming</Link>

			<Link
				href="/updates/new"
				class="scope nolink"
				:active="scope === 'new'"
			>New</Link>
		</nav>

		<ul class="scenes nolist">
			<li
				v-for="scene in scenes"
				:key="scene.id"
			>
				<Scene :scene="scene" />
			</li>
		</ul>

		<Pagination />
	</div>
</template>

<script setup>
import { inject } from 'vue';

import Scene from './tile.vue';
import Pagination from '../pagination/pagination.vue';

const { routeParams } = inject('pageContext');
const { scope } = routeParams;

defineProps({
	scenes: {
		type: Array,
		default: () => [],
	},
});
</script>

<style scoped>
.page {
	background: var(--background-base-10);
}

.scenes {
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
	gap: .75rem .5rem;
	padding: 1rem;
}

.scopes {
	margin-left: 1rem;
}

.scope {
	box-sizing: border-box;
	padding: 1rem;
	color: var(--shadow);
	font-size: .9rem;
	font-weight: bold;

	&.active {
		color: var(--primary);
		font-weight: bold;
	}
}
</style>