Add more to user page

frontend/src/lib/components/UserCard.svelte

@@ -11,10 +11,6 @@
 	export let shared_with: string[] | undefined = undefined;
 
 	export let user: User;
-
-	async function nav() {
-		goto(`/user/${user.uuid}`);
-	}
 </script>
 
 <div
@@ -44,7 +40,7 @@
 		</div>
 		<div class="card-actions justify-end">
 			{#if !sharing}
-				<button class="btn btn-primary" on:click={nav}>View</button>
+				<button class="btn btn-primary" on:click={() => goto(`/user/${user.uuid}`)}>View</button>
 			{:else if shared_with && !shared_with.includes(user.uuid)}
 				<button class="btn btn-primary" on:click={() => dispatch('share', user)}>Share</button>
 			{:else}

frontend/src/routes/user/[uuid]/+page.svelte

@@ -6,7 +6,22 @@
 	console.log(user);
 </script>
 
-<h1>{user.first_name} {user.last_name}</h1>
+<div class="avatar flex items-center justify-center mt-4">
-<p>{user.username}</p>
+	<div class="w-48 rounded-md">
+		<img src={user.profile_pic} alt={user.username} />
+	</div>
+</div>
 
-<p>{user.is_staff ? 'Admin' : 'User'}</p>
+<h1 class="text-center font-semibold text-4xl mt-4">{user.first_name} {user.last_name}</h1>
+<h2 class="text-center font-semibold text-2xl">{user.username}</h2>
+
+<div class="flex justify-center mt-4">
+	{#if user.is_staff}
+		<div class="badge badge-primary">Admin</div>
+	{/if}
+</div>
+
+<svelte:head>
+	<title>{user.username} | AdventureLog</title>
+	<meta name="description" content="View your adventure collections." />
+</svelte:head>

frontend/src/routes/users/+page.svelte

@@ -18,3 +18,8 @@
 {#if users.length === 0}
 	<p class="text-center">No users found with public profiles.</p>
 {/if}
+
+<svelte:head>
+	<title>Users</title>
+	<meta name="description" content="View your adventure collections." />
+</svelte:head>