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

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

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

				<span class="age">{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
			</div>

			<nav
				v-if="profile.id === user?.id"
				class="domains"
			>
				<a
					:href="`/user/${profile.username}/stashes`"
					class="domain nolink"
					:class="{ active: domain === 'stashes' }"
				>Stashes</a>

				<a
					:href="`/user/${profile.username}/alerts`"
					class="domain nolink"
					:class="{ active: domain === 'alerts' }"
				>Alerts</a>
			</nav>

			<Stashes v-if="domain === 'stashes'" />
			<Alerts v-if="domain === 'alerts' && profile.id === user?.id" />
		</div>
	</div>
</template>

<script setup>
import { ref, inject } from 'vue';
import { formatDistanceStrict } from 'date-fns';

import Stashes from '#/components/stashes/stashes.vue';
import Alerts from '#/components/alerts/alerts.vue';

const pageContext = inject('pageContext');
const domain = pageContext.routeParams.domain;
const user = pageContext.user;
const profile = ref(pageContext.pageProps.profile);
</script>

<style>
.profile-section {
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .5rem .5rem .5rem .5rem;

		.button {
			margin-left: 1rem;
		}
	}

	.heading {
		margin: 0;
		font-size: 1.1rem;
		color: var(--primary);
	}
}

@media(--small-30) {
	.profile-section .section-header {
		padding: .5rem .5rem .5rem .5rem;
	}
}
</style>

<style scoped>
.page {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	background: var(--background-base-10);
}

.profile {
	width: 1200px;
	max-width: 100%;
}

.profile-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem 1rem;
	margin-bottom: .5rem;
    color: var(--highlight-strong-30);
    background: var(--shadow-strong-30);
	border-radius: 0 0 .5rem .5rem;
}

.user {
	display: flex;
	overflow: hidden;
}

.username {
	margin: 0;
	font-size: 1.25rem;
}

.age {
	display: flex;
	flex-shrink: 0;
	font-size: .9rem;

	.icon {
		width: .9rem;
		fill: var(--highlight-strong-20);
		margin-right: .75rem;
		transform: translateY(-1px);
	}
}

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

.domains {
	display: flex;
	gap: .5rem;
	padding: .5rem 0;
	margin-top: .5rem;
}

.domain {
	color: var(--glass-strong-20);
	background: var(--background-dark-20);
	padding: .5rem 1rem;
	border-radius: 1rem;
	font-size: .9rem;
	font-weight: bold;

	&.active {
		background: var(--primary);
		color: var(--text-light);
	}
}

@media(--small-30) {
	.age .icon {
		display: none;
	}
}

@media(--small-50) {
	.age {
		display: none;
	}
}
</style>