From f99fd41ee23d7669812ff1d88d23a9b7f22db901 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 24 Oct 2023 18:18:37 -0700
Subject: feat(user): prettier user route

---
 src/lib/AniList/user.ts             |  5 ++++-
 src/routes/user/[user]/+page.svelte | 44 ++++++++++++++++++++++++++++---------
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/lib/AniList/user.ts b/src/lib/AniList/user.ts
index dd9995fd..fdc98a58 100644
--- a/src/lib/AniList/user.ts
+++ b/src/lib/AniList/user.ts
@@ -15,6 +15,9 @@ export interface User {
 			volumesRead: number;
 		};
 	};
+	avatar: {
+		large: string;
+	};
 }
 
 export const user = async (username: string): Promise<User> => {
@@ -28,7 +31,7 @@ export const user = async (username: string): Promise<User> => {
 				},
 				body: JSON.stringify({
 					query: `{ User(name: "${username}") {
-						name id statistics {
+						name id avatar { large } statistics {
 							anime {
 								count meanScore minutesWatched episodesWatched
 							}
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 227ba252..858e6aec 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -27,14 +27,38 @@
 {:else if userData === undefined}
 	Loading ...
 {:else}
-	<p>
-		<a href={`https://anilist.co/user/${userData.name}`} target="_blank" title={String(userData.id)}
-			>@{userData.name}</a
-		>
-		• <a href={`/user/${userData.name}/badges`}>Badge Wall</a>
-	</p>
-
-	This user has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1)} days of anime
-	and read
-	{((userData.statistics.manga.chaptersRead * 8.58) / 60 / 24).toFixed(1)} days of manga.
+	<div class="user-grid">
+		<p>
+			<a
+				href={`https://anilist.co/user/${userData.name}`}
+				target="_blank"
+				title={String(userData.id)}
+			>
+				<img src={userData.avatar.large} alt="" width="100vw" />
+			</a>
+		</p>
+
+		<div>
+			<p>
+				<a
+					href={`https://anilist.co/user/${userData.name}`}
+					target="_blank"
+					title={String(userData.id)}>@{userData.name}</a
+				>
+				• <a href={`/user/${userData.name}/badges`}>Badge Wall</a>
+			</p>
+
+			This user has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1)} days of
+			anime and read
+			{((userData.statistics.manga.chaptersRead * 8.58) / 60 / 24).toFixed(1)} days of manga.
+		</div>
+	</div>
 {/if}
+
+<style>
+	.user-grid {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 1.5em;
+	}
+</style>
-- 
cgit v1.2.3