Reinitialized commit. Update and actors overview with some filters.

components/scenes/scenes.vue

@@ -0,0 +1,81 @@
+<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 { defineProps, 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>