From e89e74843eef080daf06174a02a616bb8c156cdb Mon Sep 17 00:00:00 2001
From: hashrock <hashrock@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:41:29 +0900
Subject: [PATCH] fix(profile): apply 2 column layout to Profile page (#553)

before:

<img width="1134" alt="image"
src="https://github.com/denoland/saaskit/assets/3132889/9fedbb72-e033-4253-b6b2-1b9d4d1fb27f">


after:

<img width="1520" alt="image"
src="https://github.com/denoland/saaskit/assets/3132889/b793f63c-4cc7-4892-8ada-842e317a19b6">
<img width="532" alt="image"
src="https://github.com/denoland/saaskit/assets/3132889/2ecdf938-7a6a-4ae1-b34d-56d5410718f1">

---------

Co-authored-by: Asher Gomez <ashersaupingomez@gmail.com>
---
 routes/users/[login].tsx | 47 ++++++++++++++++++----------------------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/routes/users/[login].tsx b/routes/users/[login].tsx
index 4c00cdad45d0..5ac7c6aa8313 100644
--- a/routes/users/[login].tsx
+++ b/routes/users/[login].tsx
@@ -12,27 +12,23 @@ function Profile(
   props: { login: string; isSubscribed: boolean },
 ) {
   return (
-    <div class="flex flex-wrap py-8">
-      <GitHubAvatarImg login={props.login} size={48} />
-      <div class="px-4">
-        <div class="flex gap-x-2">
-          <span>
-            <strong>{props.login}</strong>
-          </span>
-          {props.isSubscribed && (
-            <span title="Deno Hunt premium user">🦕{" "}</span>
-          )}
-          <span>
-            <a
-              href={`https://github.com/${props.login}`}
-              aria-label={`${props.login}'s GitHub profile`}
-              class={LINK_STYLES}
-              target="_blank"
-            >
-              <IconBrandGithub class="text-sm w-6" />
-            </a>
-          </span>
+    <div class="flex flex-col items-center w-[16rem]">
+      <GitHubAvatarImg login={props.login} size={200} />
+      <div class="flex gap-x-2 px-4 mt-4">
+        <div class="font-semibold text-xl">
+          {props.login}
         </div>
+        {props.isSubscribed && (
+          <span title="Deno Hunt premium user">🦕{" "}</span>
+        )}
+        <a
+          href={`https://github.com/${props.login}`}
+          aria-label={`${props.login}'s GitHub profile`}
+          class={LINK_STYLES}
+          target="_blank"
+        >
+          <IconBrandGithub class="w-6" />
+        </a>
       </div>
     </div>
   );
@@ -57,13 +53,12 @@ export default async function UsersUserPage(
           rel="preload"
         />
       </Head>
-      <main class="flex-1 p-4">
-        <Profile
-          isSubscribed={user.isSubscribed}
-          login={user.login}
-        />
+      <main class="flex-1 p-4 flex flex-col md:flex-row gap-8">
+        <div class="flex justify-center p-4">
+          <Profile isSubscribed={user.isSubscribed} login={user.login} />
+        </div>
         <ItemsList
-          endpoint={`/api/users/${login}/items`}
+          endpoint={`/api/users/${user.login}/items`}
           isSignedIn={isSignedIn}
         />
       </main>