added podium ranks

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;