Anvil/src/routes/profile/+page.svelte

<script>
	import { Avatar } from '@skeletonlabs/skeleton';

	/** @type {import('./$types').PageData} */
	export let data;
</script>

<section class="w-full mx-auto flex px-8 pt-8">
	<!-- Profile header -->
	<div>
		<Avatar
			src={data.user.avatar}
			width="w-32"
			rounded="rounded-full"
			initials={data.user.display_name}
		/>
	</div>
	<!-- Board -->
	<div class="flex flex-1 flex-col pl-8">
		<div class="self-end">
			<span
				>created <date datetime={data.user.created_at}>{@html data.user.created_at_formatted}</date
				></span
			>
			<button type="button" class="underline">block</button>
			or
			<button type="button" class="underline">report</button>
		</div>
		<!-- Top Row -->
		<div class="flex mt-2">
			<!-- Board -->
			<div class="flex flex-col flex-1 gap-2">
				<div class="flex items-end">
					<h1 class="h1 font-semibold text-4xl leading-tight">
						<span class="sr-only">Profile for </span>
						{@html data.user.display_name}
					</h1>
					<p class="leading-normal my-1">(she/her)</p>
				</div>
				<span class="leading-tight">
					{@html data.user.username}@{@html data.user.instance}
				</span>
			</div>
			<!-- Interaction Links -->
			<button type="button" class="btn-icon border rounded-none self-start">⭐</button>
		</div>
	</div>
</section>
<section class="w-full h-full mx-auto flex mt-8 px-8">
	<!-- Board -->
	<div class="flex flex-1 flex-col px-4">
		<div class="space-y-6">
			<h2 class="h2 font-semibold leading-tight text-base px-4">Projects</h2>
			<p class="px-4">
				No projects added yet.
				<a class="anchor" href="#">Add a project</a>
				or
				<a class="anchor" href="#">import a project</a>.
			</p>
		</div>
	</div>
	<!-- History -->
	<div class="flex flex-1 flex-col px-4">
		<div class="space-y-6">
			<h2 class="h2 font-semibold leading-tight text-base">Activities</h2>
			<ul>
				<li class="flex flex-col border-l-2 ml-2">
					<!-- Commit day -->
					<span>
						<!-- North Star in surface-900 -->
						<span class="-ml-2 bg-[#0f161f]">✴️</span>
						<span class="ml-4">Apr 23, 2023 - account set up</span>
					</span>
					<!-- Commits -->
					<span class="ml-6 mt-8">
						<span class="border box-decoration-clone px-4 py-2 leading-10">
							The F2 account @{@html data.user.username}@{@html data.user.instance} was successfully
							set up within {@html data.user.created_with}
						</span>
					</span>
				</li>
			</ul>
		</div>
	</div>
</section>