From 0cde4d11088048ea5eaa6ffa05667af959a25aae Mon Sep 17 00:00:00 2001
From: Lyn <0xlynett@proton.me>
Date: Wed, 11 Sep 2024 20:24:08 +0000
Subject: [PATCH] add leaderboard

---
 src/components/Leaderboard.tsx | 26 +++++++++++++++++++++-----
 src/components/TaskList.tsx    |  1 -
 src/pages/App.tsx              | 10 ++++++----
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/Leaderboard.tsx b/src/components/Leaderboard.tsx
index 34350fa..531fd70 100644
--- a/src/components/Leaderboard.tsx
+++ b/src/components/Leaderboard.tsx
@@ -5,12 +5,28 @@ export type XPList = {
 }[];
 
 export interface LeaderboardProps {
-  list: XPList;
+  list?: XPList;
 }
 export default function Leaderboard({ list }: LeaderboardProps) {
   return list
-    .sort((a, b) => a.xp - b.xp)
-    .map(({ username, xp }) => {
-      //
-    });
+    ? list
+        .sort((a, b) => b.xp - a.xp)
+        .map(({ username, xp }, i) => {
+          return (
+            <div
+              key={username}
+              className={
+                "flex justify-between items-center p-4 " +
+                (i % 2 == 1 ? "bg-content2" : "")
+              }
+            >
+              <span>
+                <span className="font-semibold text-2xl">#{i + 1}</span>{" "}
+                <span>{username}</span>
+              </span>
+              <span className="font-semibold">{xp} XP</span>
+            </div>
+          );
+        })
+    : undefined;
 }
diff --git a/src/components/TaskList.tsx b/src/components/TaskList.tsx
index 9db1dcd..31dfdb8 100644
--- a/src/components/TaskList.tsx
+++ b/src/components/TaskList.tsx
@@ -16,7 +16,6 @@ export interface TaskListProps {
 }
 
 export default function TaskList({ tasks }: TaskListProps) {
-  console.log(tasks);
   return tasks
     ? tasks.map((v, i) => {
         return (
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 827e31f..d2458f3 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -16,11 +16,13 @@ import React, { useMemo, useState } from "react";
 import SquadList, { Squad } from "../components/SquadList";
 import TaskList, { Task } from "../components/TaskList";
 import { useRouteLoaderData } from "react-router";
+import Leaderboard, { XPList } from "../components/Leaderboard";
 
 const Board: React.FC = () => {
-  const { squads, tasks } = useRouteLoaderData("root") as {
+  const { squads, tasks, leaderboard } = useRouteLoaderData("root") as {
     squads: Squad[] | undefined;
     tasks: Task[] | undefined;
+    leaderboard: XPList | undefined;
   };
 
   const [squadsVisible, setSquadsVisible] = useState(true);
@@ -52,7 +54,7 @@ const Board: React.FC = () => {
     <div className="container mx-auto p-4">
       <h1 className="text-2xl font-bold mb-4 pl-2">2077 Community Dashboard</h1>
       <div className="grid grid-cols-6 md:grid-cols-12 gap-4">
-        <Card className="border-cyan2077 border col-span-5">
+        <Card className="border-cyan2077 border col-span-6 md:col-span-7">
           <CardHeader>
             <div className="w-full flex items-center">
               <h2 className="text-xl font-semibold inline-block">
@@ -84,7 +86,7 @@ const Board: React.FC = () => {
             </ul>
           </CardBody>
         </Card>
-        <Card className="border-cyan2077 border h-72 col-span-7">
+        <Card className="border-cyan2077 border h-72 col-span-6 md:col-span-5">
           <CardHeader>
             <div className="w-full flex items-center">
               <h2 className="text-xl font-semibold inline-block">
@@ -94,7 +96,7 @@ const Board: React.FC = () => {
           </CardHeader>
           <Divider />
           <CardBody>
-            <p>XP LEADERBOARD GOES HERE</p>
+            <Leaderboard list={leaderboard} />
           </CardBody>
         </Card>
         <Card className="self-start border-cyan2077 border col-span-6">