fix(profile): apply 2 column layout to Profile page (denoland#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 <[email protected]>
dreamcatcher-tech · Sep 10, 2023 · e89e748 · e89e748
1 parent b2cbfe6
commit e89e748
Showing 1 changed file with 21 additions and 26 deletions.
diff --git 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>