Improved UI

src/app/leaderboards/components/LeaderboardRow.tsx

@@ -1,3 +1,4 @@
+import Rank from "@/components/app/Rank";
 import { LinkIcon, Trophy } from "lucide-react";
 import Link from "next/link";
 
@@ -17,20 +18,6 @@ const LeaderboardRow = ({
   index?: number;
   run: GlobalLeaderboardUser;
 }) => {
-  const getRankStyle = (rank: number) => {
-    if (rank === 1) return "rank-gold";
-    if (rank === 2) return "rank-silver";
-    if (rank === 3) return "rank-bronze";
-    return "bg-secondary text-muted-foreground";
-  };
-
-  const getRankGlow = (rank: number) => {
-    if (rank === 1) return "glow-gold";
-    if (rank === 2) return "glow-silver";
-    if (rank === 3) return "glow-bronze";
-    return "";
-  };
-
   const isTopThree = run.rank <= 3;
 
   return (
@@ -45,13 +32,7 @@ const LeaderboardRow = ({
     >
       {/* Rank */}
       <td className="py-4 px-5 w-16">
-        <div
+        <Rank rank={run.rank} />
-          className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(
-            run.rank
-          )} ${getRankGlow(run.rank)}`}
-        >
-          {isTopThree ? <Trophy className="h-4 w-4" /> : run.rank}
-        </div>
       </td>
 
       {/* Username */}

src/app/profile/page.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 
 import ProfileStatCard from "@/app/profile/components/ProfileStatCard";
+import Rank from "@/components/app/Rank";
 
 export default function Profile() {
   const user = {
@@ -34,8 +35,8 @@ export default function Profile() {
               <div className="w-24 h-24 rounded-2xl bg-linear-to-br from-primary to-primary/60 flex items-center justify-center text-3xl font-bold text-primary-foreground glow-purple">
                 {user.username[0].toUpperCase()}
               </div>
-              <div className="absolute -bottom-2 -right-2 w-8 h-8 rounded-lg rank-gold flex items-center justify-center text-sm font-bold glow-gold">
+              <div className="absolute -bottom-2 -right-2 w-8 h-8">
-                #{user.rank}
+                <Rank rank={user.rank} />
               </div>
             </div>
 

src/app/run/page.tsx

@@ -9,7 +9,7 @@ import Editor from "./components/Editor";
 import useAction from "@/hook/use-action";
 import { getLiveRun } from "@/modules/live-run/actions";
 import ProblemCard from "../problems/components/ProblemCard";
-import ProfileCard from "@/components/app/ProfileCard";
+import ProfileCard from "./components/ProfileCard";
 
 export default function Run() {
   const [runInfo] = useAction(getLiveRun);
@@ -28,13 +28,13 @@ export default function Run() {
         pt-20 sm:pt-24
         pb-6 sm:pb-12
         flex flex-col lg:flex-row
-        gap-6 lg:gap-8
+        gap-5
       "
     >
       {/* Main column */}
       <div className="h-full w-full flex flex-col gap-4">
         {/* Top cards */}
-        <div className="w-full flex flex-col md:flex-row gap-4 md:gap-5">
+        <div className="w-full flex flex-wrap gap-4 md:gap-5">
           <div className="flex-1 animate-fade-in opacity-0">
             <ProfileCard user={{ username: "selimaj", rank: 1 }} />
           </div>
@@ -80,7 +80,7 @@ export default function Run() {
             </div>
 
             {/* Code */}
-            <div className="flex-1 w-full pl-0 md:pl-5 flex flex-col">
+            <div className="flex-1 w-full h-svh md:h-full pl-0 md:pl-5 flex flex-col">
               <header className="text-sm font-medium text-muted-foreground flex items-center gap-1">
                 <File size={16} /> myfile.js
               </header>

src/components/app/ProfileCard.tsx

@@ -1,35 +0,0 @@
-import { Badge } from "../ui/badge";
-import { Card, CardContent } from "../ui/card";
-
-export default function ProfileCard({
-  user,
-}: {
-  user: { username: string; rank: number };
-}) {
-  return (
-    <Card className="relative w-full h-full overflow-hidden">
-      <div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent" />
-
-      <CardContent className="relative flex flex-row gap-6 w-full h-full">
-        {/* Avatar */}
-        <div className="relative shrink-0 w-1/4 h-full flex items-center justify-center">
-          <img
-            src="http://github.com/selimaj-dev.png"
-            alt="Img"
-            className="rounded-2xl aspect-square max-h-full w-auto object-contain"
-          />
-
-          <div className="absolute -bottom-2 -right-2 w-8 h-8 rounded-lg rank-gold flex items-center justify-center text-xs font-bold glow-gold">
-            #{user.rank}
-          </div>
-        </div>
-
-        {/* User Info */}
-        <div className="flex-1 flex flex-col justify-center w-full">
-          <h1 className="text-3xl font-bold mb-2">{user.username}</h1>
-          <Badge>World Record Holder</Badge>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}