feat(#32): Link profile page to actual profile

src/routes/profile/+page.svelte

@@ -1,4 +1,21 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { user } from '$lib/stores/user.js';
+	import { type User } from '@supabase/auth-js';
+
+	export let data;
+	let { supabase } = data;
+	$: ({ supabase } = data);
+
+	let localUser: User | null;
+	const unsubscribe = user.subscribe((value) => {
+		localUser = value;
+	});
+	onDestroy(unsubscribe);
+</script>
+
 <div class="h-screen">
+	{#if localUser}
 		<div id="banner">
 			<div id="avatar">
 				<div
@@ -9,7 +26,7 @@
 				<button class="btn btn-outline btn-primary">Upload new avatar</button>
 			</div>
 			<div id="personal-information">
-			<p class="text-white font-mono text-3xl font-bold">Username</p>
+				<p class="text-white font-mono text-3xl font-bold">{localUser?.email}</p>
 				<p class="text-white font-mono text-3xl font-bold">Title</p>
 				<p class="text-white font-mono text-3xl font-bold">Level</p>
 			</div>
@@ -40,6 +57,9 @@
 				encouraging engagement and interaction with other users
 			</div>
 		</div>
+	{:else}
+		<p>Please log in to view this page</p>
+	{/if}
 </div>
 
 <style>