From 7111eca5312e1edcaa26da26d260b9a674e06d60 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Thu, 7 Aug 2025 14:51:33 -0500
Subject: [PATCH] added podium ranks

---
 package-lock.json        | 17 +++++++++++++++++
 package.json             |  2 ++
 src/app/layout.tsx       |  2 ++
 src/app/page.tsx         | 24 +++++++++++++++++++++---
 src/components/Table.tsx | 29 +++++++++++++++++++++--------
 5 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bf5e3ed..0434bb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "date-fns": "^4.1.0",
+        "lucide": "^0.537.0",
+        "lucide-react": "^0.537.0",
         "next": "15.4.6",
         "react": "19.1.0",
         "react-dom": "19.1.0"
@@ -1363,6 +1365,21 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lucide": {
+      "version": "0.537.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.537.0.tgz",
+      "integrity": "sha512-EuafIo7OaBBdHhIF5/v6G2H9IOFwZkY2ZFiqn2xHO8QEInXxQnPDJM+nX8CFylBISMZ8GlB9ktSMSgqP/L0kQw==",
+      "license": "ISC"
+    },
+    "node_modules/lucide-react": {
+      "version": "0.537.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.537.0.tgz",
+      "integrity": "sha512-VxWsdxBGeFnlC+HwMg/l08HptN4YRU9o/lRog156jOmRxI1ERKqN+rJiNY/mPcKAdWdM0UbyO8ft1o0jq69SSQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
diff --git a/package.json b/package.json
index 83897e7..0c91719 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
+    "lucide": "^0.537.0",
+    "lucide-react": "^0.537.0",
     "next": "15.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0"
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f7fa87e..4d58a90 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -27,6 +27,8 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <div className="w-full h-14 bg-neutral-900"></div>
+
         {children}
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2a11060..d6ab192 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -34,18 +34,34 @@ export default function Home() {
       time: 63,
       problem: "Two Sum",
       date: 1651600541000,
+    },{
+      rank: 2,
+      name: "Kleo",
+      time: 63,
+      problem: "Two Sum",
+      date: 1651600541000,
+    },{
+      rank: 3,
+      name: "Kleo",
+      time: 63,
+      problem: "Two Sum",
+      date: 1651600541000,
+    },{
+      rank: 4,
+      name: "Kleo",
+      time: 63,
+      problem: "Two Sum",
+      date: 1651600541000,
     },
   ];
 
   return (
     <>
-      <div className="w-full h-14 bg-neutral-900"></div>
-
       <div className="mt-5 mx-10 xl:mx-[35rem] flex gap-5">
         <div className="w-full">
           <SpeedrunTable data={users} />
         </div>
-        <div className="w-[35rem]">
+        <div className="w-[35rem] h-max">
           <div className="w-full bg-[#121212] h-full rounded-lg p-5">
             <h1 className="font-bold">LATEST NEWS</h1>
             <div className="flex flex-col w-full pt-3">
@@ -75,6 +91,8 @@ export default function Home() {
               />
             </div>
           </div>
+
+          
         </div>
       </div>
     </>
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index b0f6796..ebe8df3 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,5 +1,6 @@
 import { format, timeAgo } from "@/lib/utils";
 import { formatDate } from "date-fns";
+import { TrophyIcon } from "lucide-react";
 import React from "react";
 
 export interface Speedrun {
@@ -38,25 +39,29 @@ const SpeedrunTable: React.FC<TableProps> = ({ data }) => {
           </tr>
         </thead>
         <tbody>
-          {data.map((user) => (
+          {data.map((speedrun, i) => (
             <tr
-              key={user.rank}
+              key={i}
               className="hover:bg-[#1f1f1f] transition-colors border-b border-[#1e1e1e]"
             >
-              <td className="px-6 py-4 whitespace-nowrap">{user.rank}</td>
+              <td className="px-6 py-4 whitespace-nowrap flex justify-center">
+                <Rank rank={speedrun.rank} />
+              </td>
               <td className="px-6 py-4 whitespace-nowrap font-bold">
-                {user.name}
+                {speedrun.name}
               </td>
               <td className="px-6 py-4 whitespace-nowrap">
-                {format(user.time)}
+                {format(speedrun.time)}
               </td>
               <td
                 className="px-6 py-4 whitespace-nowrap"
-                title={new Date(user.date).toLocaleString()}
+                title={new Date(speedrun.date).toLocaleString()}
               >
-                {timeAgo(user.date)}
+                {timeAgo(speedrun.date)}
+              </td>
+              <td className="px-6 py-4 whitespace-nowrap">
+                {speedrun.problem}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap">{user.problem}</td>
             </tr>
           ))}
         </tbody>
@@ -65,4 +70,12 @@ const SpeedrunTable: React.FC<TableProps> = ({ data }) => {
   );
 };
 
+function Rank({ rank }: { rank: number }) {
+  if (rank === 1) return <TrophyIcon className="w-4 text-amber-400" />;
+  if (rank === 2) return <TrophyIcon className="w-4 text-slate-400" />;
+  if (rank === 3) return <TrophyIcon className="w-4 text-amber-600" />;
+
+  return rank;
+}
+
 export default SpeedrunTable;