feat(leaderboard): more work with hero & table sections on mobile

Author: Logannford

src/app/(app)/(default_layout)/leaderboard/page.tsx

@@ -25,7 +25,7 @@ export default async function TodaysLeaderboardPage() {
       {/** @ts-ignore - this is the valid type */}
       <LeaderboardHero topThreeUsers={topThreeUsers} />
       <div className="lg:container flex flex-col xl:flex-row gap-10 mt-5">
-        <LeaderboardMostQuestionsAnswered userUid={user?.uid} />
+        <LeaderboardMostQuestionsAnswered user={user} />
       </div>
     </>
   );

src/components/app/leaderboard/leaderboard-hero.tsx

@@ -62,14 +62,20 @@ export default function LeaderboardHero(opts: {
                     <ProfilePicture
                       src={user.userProfilePicture}
                       alt={`${user.username} profile picture`}
-                      className="size-6 md:size-8 rounded-full shadow-lg"
+                      className="size-8 md:size-12 rounded-full shadow-lg"
                     />
                     {/** if first, add a crown top right of the profile picture */}
                     {position === 1 && (
-                      <div className="absolute -top-3 left-2 size-4">
+                      <div className="absolute -top-3 left-4 size-4">
                         <Crown className="size-4 text-yellow-500 fill-yellow-400" />
                       </div>
                     )}
+                    {/** if the user is a premium users */}
+                    {user.userLevel === 'PREMIUM' && (
+                      <div className="relative -top-3 left-1.5 w-fit bg-accent text-xs flex items-center justify-center px-2 py-0.5 rounded-full">
+                        <span className="text-[10px]">PRO</span>
+                      </div>
+                    )}
                   </div>
                   <span className="mt-2 text-sm md:text-base font-semibold line-clamp-1">
                     {getUserDisplayName(user as unknown as UserRecord)}
@@ -82,7 +88,7 @@ export default function LeaderboardHero(opts: {
                 <div
                   className={`absolute inset-0 transform-3d rotate-x-55 rotate-y-45 ${
                     position === 1
-                      ? 'bg-[#202020]'
+                      ? 'bg-[#252525]'
                       : position === 2
                         ? 'bg-black-100'
                         : 'bg-black-100'

src/components/app/leaderboard/leaderboard-most-questions-answered.tsx

@@ -1,4 +1,4 @@
-import { Trophy } from 'lucide-react';
+import { FileQuestion, Trophy } from 'lucide-react';
 import { getMostQuestionsAnswered } from '@/utils/data/leaderboard/get-most-questions-answered';
 import ProfilePicture from '@/components/ui/profile-picture';
 import { UserRecord } from '@/types/User';
@@ -23,17 +23,17 @@ import { Badge } from '@/components/ui/badge';
 import ShowTimeTakenToggle from './show-time-taken';
 
 export default async function LeaderboardMostQuestionsAnswered({
-  userUid,
+  user,
 }: {
-  userUid?: string;
+  user?: UserRecord | null;
 }) {
   const topUsersByQuestionCount = await getMostQuestionsAnswered();
 
   return (
     <Card className="border-none">
       <CardHeader className="p-0 md:p-6 w-full flex gap-2 justify-between">
-        <div className="flex flex-wrap items-center justify-between gap-2">
-          <div className="flex items-center gap-x-2">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div className="order-last md:order-first flex items-center gap-x-2">
             <Trophy className="size-5 text-accent" />
             <div>
               <CardTitle className="text-white">
@@ -44,7 +44,7 @@ export default async function LeaderboardMostQuestionsAnswered({
               </CardDescription>
             </div>
           </div>
-          <ShowTimeTakenToggle />
+          <ShowTimeTakenToggle user={user} />
         </div>
       </CardHeader>
       <CardContent className="p-0 pt-6 md:p-6 md:pt-0">
@@ -57,15 +57,18 @@ export default async function LeaderboardMostQuestionsAnswered({
               <TableHead className="!border-t-0 text-white bg-transparent">
                 User
               </TableHead>
-              <TableHead className="!border-t-0 text-right text-white bg-transparent">
-                Questions Solved
+              <TableHead className="!border-t-0 flex justify-center items-center xs:justify-end gap-2 md:text-right text-white bg-transparent">
+                <span className="hidden sm:block">Questions Solved</span>
+                <span className="block sm:hidden">
+                  <FileQuestion className="size-4 text-white" />
+                </span>
               </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            {topUsersByQuestionCount.map((user, index) => (
+            {topUsersByQuestionCount.map((userData, index) => (
               <TableRow
-                key={user.uid}
+                key={userData.uid}
                 className="border-white/10 hover:bg-white/5 transition-colors"
               >
                 <TableCell className="font-medium text-white">
@@ -87,18 +90,18 @@ export default async function LeaderboardMostQuestionsAnswered({
                 <TableCell>
                   <div className="flex items-center gap-4">
                     <ProfilePicture
-                      src={user.userProfilePicture}
-                      alt={`${user.username} profile picture`}
+                      src={userData.userProfilePicture}
+                      alt={`${userData.username} profile picture`}
                       className="text-white"
                     />
                     <div className="flex gap-2">
-                      <span className="text-white font-medium">
-                        {shortenText(
-                          getUserDisplayName(user as unknown as UserRecord),
-                          25
-                        )}
+                      <span className="text-white font-medium hidden md:block">
+                        {shortenText(getUserDisplayName(userData as any), 25)}
                       </span>
-                      {userUid === user.uid && (
+                      <span className="text-white font-medium block md:hidden">
+                        {shortenText(getUserDisplayName(userData as any), 10)}
+                      </span>
+                      {user?.uid === userData.uid && (
                         <span className="text-xs text-white">(You)</span>
                       )}
                     </div>
@@ -109,7 +112,7 @@ export default async function LeaderboardMostQuestionsAnswered({
                     variant="outline"
                     className="border-white/10 text-white"
                   >
-                    {user._count.answers}
+                    {userData._count.answers}
                   </Badge>
                 </TableCell>
               </TableRow>

src/components/app/leaderboard/show-time-taken.tsx

@@ -5,9 +5,12 @@ import { Label } from '@/components/ui/label';
 import { updateUser } from '@/actions/user/authed/update-user';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import { UserRecord } from '@/types/User';
 
-export default function ShowTimeTakenToggle() {
-  const [checked, setChecked] = useState(true);
+export default function ShowTimeTakenToggle(opts: {
+  user?: UserRecord | null;
+}) {
+  const [checked, setChecked] = useState(opts.user?.showTimeTaken ?? true);
 
   const handleSubmit = async (formData: FormData) => {
     const showTimeTaken = formData.get('showTimeTaken') === 'on';
@@ -17,7 +20,6 @@ export default function ShowTimeTakenToggle() {
           showTimeTaken,
         },
       });
-
       toast.success('User updated');
     } catch (error) {
       toast.error('Failed to update user');
@@ -40,6 +42,7 @@ export default function ShowTimeTakenToggle() {
           handleSubmit(formData);
         }}
         className="bg-black-50"
+        disabled={!opts.user}
       />
       <Label htmlFor="showTimeTaken" className="text-white">
         {checked ? 'Hide' : 'Show'} on leaderboard?

src/utils/data/leaderboard/get-most-questions-answered.ts

@@ -22,8 +22,9 @@ export const getMostQuestionsAnswered = async (take: number = 20) => {
       answers: true,
       userProfilePicture: true,
       _count: {
-        select: { answers: true }, // Count on actual references
+        select: { answers: true },
       },
+      userLevel: true,
     },
   });
 };