feat: add github contributors leaderboard (#7277)

* feat: add github contributors leaderboard

* Improve UI for leaderboard

---------

Co-authored-by: Kamran Ahmed <[email protected]>

Author: arikchakma

public/images/gifs/party-popper.gif

@@ -17,6 +17,9 @@ export type ListLeaderboardStatsResponse = {
     currentMonth: LeadeboardUserDetails[];
     lifetime: LeadeboardUserDetails[];
   };
+  githubContributors: {
+    currentMonth: LeadeboardUserDetails[];
+  };
 };
 
 export function leaderboardApi(context: APIContext) {

public/images/rocket.gif public/images/gifs/rocket.gif

@@ -23,7 +23,7 @@ const formattedDate = DateTime.fromISO('2024-09-13').toFormat('dd LLL, yyyy');
   <div
     class='flex flex-col items-center justify-center gap-2 sm:gap-2 rounded-xl border bg-white px-8 py-12 text-center'
   >
-    <img src='/images/rocket.gif' class='w-[70px] mb-4' />
+    <img src='/images/gifs/rocket.gif' class='w-[70px] mb-4' />
     <h2 class='text-balance text-xl font-medium'>Changelog page is launched</h2>
     <p class='font-normal text-balance text-gray-400 text-sm sm:text-base'>
       We will be sharing a selected list of updates, improvements, and fixes made to

public/images/gifs/star.gif

@@ -10,7 +10,7 @@ const top10Changelogs = allChangelogs.slice(0, 10);
   <div class='container !max-w-[650px]'>
     <p class='text-2xl font-bold sm:text-5xl'>
       <img
-        src='/images/rocket.gif'
+        src='/images/gifs/rocket.gif'
         alt='Rocket'
         class='mr-2 hidden sm:inline h-12 w-12'
       />

public/images/gifs/starstruck.gif

@@ -1,11 +1,10 @@
-import { useState, type ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
 import type {
   LeadeboardUserDetails,
   ListLeaderboardStatsResponse,
 } from '../../api/leaderboard';
 import { cn } from '../../lib/classname';
-import { FolderKanban, Zap, Trophy } from 'lucide-react';
-import { RankBadgeIcon } from '../ReactIcons/RankBadgeIcon';
+import { FolderKanban, GitPullRequest, Trophy, Zap } from 'lucide-react';
 import { TrophyEmoji } from '../ReactIcons/TrophyEmoji';
 import { SecondPlaceMedalEmoji } from '../ReactIcons/SecondPlaceMedalEmoji';
 import { ThirdPlaceMedalEmoji } from '../ReactIcons/ThirdPlaceMedalEmoji';
@@ -19,17 +18,25 @@ export function LeaderboardPage(props: LeaderboardPageProps) {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <div className="container py-10">
+      <div className="container py-5 sm:py-10">
         <div className="mb-8 text-center">
-          <div className="mb-2 flex items-center justify-center gap-3">
-            <Trophy className="size-8 text-yellow-500" />
-            <h2 className="text-2xl font-bold sm:text-3xl">Leaderboard</h2>
+          <div className="flex flex-col items-start sm:items-center justify-center">
+            <img
+              src={'/images/gifs/star.gif'}
+              alt="party-popper"
+              className="mb-4 mt-0 sm:mt-3 h-14 w-14 hidden sm:block"
+            />
+            <div className="mb-0 sm:mb-4 flex flex-col items-start sm:items-center justify-start sm:justify-center">
+              <h2 className="mb-1.5 sm:mb-2 text-2xl font-semibold sm:text-4xl">
+                Leaderboard
+              </h2>
+              <p className="max-w-2xl text-left sm:text-center text-balance text-sm text-gray-500 sm:text-base">
+                Top users based on their activity on roadmap.sh
+              </p>
+            </div>
           </div>
-          <p className="mx-auto max-w-2xl text-balance text-sm text-gray-500 sm:text-base">
-            Top users based on their activity on roadmap.sh
-          </p>
 
-          <div className="mt-8 grid gap-2 md:grid-cols-2">
+          <div className="mt-5 sm:mt-8 grid gap-2 md:grid-cols-2">
             <LeaderboardLane
               title="Longest Visit Streak"
               tabs={[
@@ -64,6 +71,19 @@ export function LeaderboardPage(props: LeaderboardPageProps) {
                 },
               ]}
             />
+            <LeaderboardLane
+              title="Top Contributors"
+              tabs={[
+                {
+                  title: 'This Month',
+                  users: stats.githubContributors.currentMonth,
+                  emptyIcon: (
+                    <GitPullRequest className="size-16 text-gray-300" />
+                  ),
+                  emptyText: 'No contributors this month',
+                },
+              ]}
+            />
           </div>
         </div>
       </div>
@@ -88,8 +108,8 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
   const { users: usersToShow, emptyIcon, emptyText } = activeTab;
 
   return (
-    <div className="overflow-hidden rounded-md border bg-white shadow-sm">
-      <div className="flex items-center justify-between gap-2 bg-gray-100 px-3 py-3 mb-3">
+    <div className="flex flex-col overflow-hidden rounded-xl border bg-white min-h-[450px] ">
+      <div className="mb-3 flex items-center justify-between gap-2 px-3 py-3">
         <h3 className="text-base font-medium">{title}</h3>
 
         {tabs.length > 1 && (
@@ -118,7 +138,7 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
       </div>
 
       {usersToShow.length === 0 && emptyText && (
-        <div className="flex flex-col items-center justify-center p-8">
+        <div className="flex flex-grow flex-col items-center justify-center p-8">
           {emptyIcon}
           <p className="mt-4 text-sm text-gray-500">{emptyText}</p>
         </div>
@@ -128,19 +148,23 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
         <ul className="divide-y divide-gray-100 pb-4">
           {usersToShow.map((user, counter) => {
             const avatar = user?.avatar
-              ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}`
+              ? user?.avatar?.startsWith('http')
+                ? user?.avatar
+                : `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}`
               : '/images/default-avatar.png';
+
             const rank = counter + 1;
+            const isGitHubUser = avatar?.indexOf('github') > -1;
 
             return (
               <li
                 key={user.id}
-                className="flex items-center justify-between gap-1 pl-2 pr-5 py-2.5 hover:bg-gray-50"
+                className="flex items-center justify-between gap-1 py-2.5 pl-2 pr-5"
               >
                 <div className="flex min-w-0 items-center gap-2">
                   <span
                     className={cn(
-                      'relative text-xs mr-1 flex size-6 shrink-0 items-center justify-center rounded-full tabular-nums',
+                      'relative mr-1 flex size-6 shrink-0 items-center justify-center rounded-full text-xs tabular-nums',
                       {
                         'text-black': rank <= 3,
                         'text-gray-400': rank > 3,
@@ -153,9 +177,19 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
                   <img
                     src={avatar}
                     alt={user.name}
-                    className="size-7 shrink-0 rounded-full"
+                    className="mr-1 size-7 shrink-0 rounded-full"
                   />
-                  <span className="truncate">{user.name}</span>
+                  {isGitHubUser ? (
+                    <a
+                      href={`https://github.com/${user.name}`}
+                      target="_blank"
+                      className="truncate font-medium underline underline-offset-2"
+                    >
+                      {user.name}
+                    </a>
+                  ) : (
+                    <span className="truncate">{user.name}</span>
+                  )}
                   {rank === 1 ? (
                     <TrophyEmoji className="size-5" />
                   ) : rank === 2 ? (
@@ -167,7 +201,17 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
                   )}
                 </div>
 
-                <span className="text-sm text-gray-500">{user.count}</span>
+                {isGitHubUser ? (
+                  <a
+                    target={'_blank'}
+                    href={`https://github.com/kamranahmedse/developer-roadmap/pulls/${user.name}`}
+                    className="text-sm text-gray-500"
+                  >
+                    {user.count}
+                  </a>
+                ) : (
+                  <span className="text-sm text-gray-500">{user.count}</span>
+                )}
               </li>
             );
           })}