added podium ranks

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",

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"

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>

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>
     </>

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;