Added actor stash.

components/stashes/stash.vue

@@ -0,0 +1,158 @@
+<template>
+	<div class="stash">
+		<div class="header">
+			<h2 class="title">
+				<Icon
+					v-if="stash.primary"
+					icon="heart7"
+				/>
+
+				<Icon
+					v-else
+					icon="box"
+				/>
+
+				{{ stash.name }}
+			</h2>
+
+			<a
+				:href="`/user/${stash.user.username}`"
+				class="user nolink"
+			>
+				<img
+					:src="stash.user.avatar"
+					class="avatar"
+				><span class="userame ellipsis">{{ stash.user.username }}</span>
+			</a>
+		</div>
+
+		<div class="content">
+			<nav class="domains">
+				<Link
+					:href="getPath('scenes')"
+					class="domain nolink"
+					:active="domain === 'scenes'"
+				>Scenes</Link>
+
+				<Link
+					:href="getPath('actors')"
+					class="domain nolink"
+					:active="domain === 'actors'"
+				>Actors</Link>
+
+				<Link
+					:href="getPath('movies')"
+					class="domain nolink"
+					:active="domain === 'movies'"
+				>Movies</Link>
+			</nav>
+
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+
+const pageContext = inject('pageContext');
+const { routeParams } = pageContext;
+
+const domain = routeParams.domain;
+const stash = pageContext.pageProps.stash;
+
+function getPath(targetDomain) {
+	return `/stash/${stash.user.username}/${stash.slug}/${targetDomain}`;
+}
+</script>
+
+<style scoped>
+.stash {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	padding: .5rem 1rem;
+	color: var(--text-light);
+	background: var(--grey-dark-40);
+	flex-shrink: 0;
+}
+
+.title {
+	margin: 0;
+	text-transform: capitalize;
+	display: flex;
+	align-items: center;
+	font-size: 1.2rem;
+	margin-right: 1rem;
+
+	.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		margin-right: .75rem;
+		fill: var(--text-light);
+	}
+}
+
+.user {
+	display: flex;
+	align-items: center;
+	font-weight: bold;
+	overflow: hidden;
+}
+
+.avatar {
+	width: 1.5rem;
+	height: 1.5rem;
+	margin-right: .75rem;
+	border-radius: .25rem;
+}
+
+.scenes-container {
+	overflow-y: auto;
+}
+
+.domains {
+	display: flex;
+	gap: .5rem;
+	padding: .5rem 1rem;
+}
+
+.domain {
+	box-sizing: border-box;
+	padding: .5rem 1rem;
+	background: var(--background-dark-20);
+	border-radius: 1rem;
+	color: var(--shadow);
+	font-size: .9rem;
+	font-weight: bold;
+
+	&.active {
+		background: var(--primary);
+		color: var(--text-light);
+	}
+}
+
+.content {
+	overflow-y: auto;
+}
+
+@media(--small-50) {
+	.title {
+		font-size: 1rem;
+
+		.icon {
+			width: 1rem;
+			height: 1rem;
+		}
+	}
+
+	.avatar {
+		display: none;
+	}
+}
+</style>