traxxx-web/pages/users/@username/+Page.vue

<template>
	<div class="profile">
		<div class="profile-header">
			<img
				v-if="profile.avatar"
				:src="profile.avatar"
				class="avatar"
			>

			<h2 class="username">{{ profile.username }}</h2>
		</div>

		<ul class="stashes nolist">
			<li
				v-for="stash in profile.stashes"
				:key="`stash-${stash.id}`"
			>
				<div class="stash">
					<a
						:href="`/stash/${profile.username}/${stash.slug}`"
						class="stash-name nolink"
					>
						{{ stash.name }}

						<Icon
							v-if="stash.primary"
							icon="heart7"
							class="primary"
						/>
					</a>

					<div class="stash-counts">
						<a
							:href="`/stash/${profile.username}/${stash.slug}/scenes`"
							class="stash-count nolink"
						><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</a>

						<a
							:href="`/stash/${profile.username}/${stash.slug}/actors`"
							class="stash-count nolink"
						><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</a>

						<a
							:href="`/stash/${profile.username}/${stash.slug}/movies`"
							class="stash-count nolink"
						><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</a>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

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

const pageContext = inject('pageContext');
const profile = pageContext.pageProps.profile;

function abbreviateNumber(number) {
	return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
}
</script>

<style scoped>
.profile-header {
	display: flex;
	align-items: center;
	padding: .5rem 1rem;
    color: var(--highlight-strong-30);
    background: var(--grey-dark-40);
}

.username {
	margin: 0;
}

.avatar {
	width: 2rem;
	height: 2rem;
	border-radius: .25rem;
	margin-right: 1rem;
}

.stashes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 1rem;
	padding: 1rem;
}

.stash {
	width: 100%;
	background: var(--background);
	box-shadow: 0 0 3px var(--shadow-weak-30);

	&:hover {
		box-shadow: 0 0 3px var(--shadow-weak-20);
	}
}

.stash-name {
	display: flex;
	padding: .5rem;
	border-bottom: solid 1px var(--shadow-weak-30);
	font-weight: bold;

	.icon {
		margin-left: .75rem;
	}

	.icon.primary {
		fill: var(--primary);
	}
}

.stash-counts {
	display: flex;
	justify-content: space-between;
}

.stash-count {
	display: inline-flex;
	align-items: center;
	padding: .5rem;
	flex-grow: 1;
	font-size: .9rem;

	.icon {
		margin-right: .5rem;
		fill: var(--shadow);
	}

	&:hover {
		color: var(--primary);

		.icon {
			fill: var(--primary);
		}
	}
}
</style>