update leader board

src/App.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import "@/App.css";
 import { checkLogin, tokenlogin, getPubInfo, login } from "@/utils/login";
 import cosmetics from "../cosmetics.json";
 import {

src/Leaderboard.jsx

@@ -1,13 +1,39 @@
 import React, { useEffect, useState } from "react";
+import Nav from "@/components/nav";
 
+export default function Leaderboard() {
+  const [leaderboard, setLeaderboard] = useState([]);
+  const [profiles, setProfiles] = useState({});
+  const [range, setRange] = useState("all");
+  const [type, setType] = useState("xp");
+  const [total, setTotal] = useState(0);
 
-export default function Leaderboard(){
-
+  useEffect(() => {
+    const fetchLeaderboard = async () => {};
+  }, []);
 
-
-  return (
-    <div>
-      <h1>Leaderboard</h1>
-    </div>
-  );
-}
+  if (leaderboard.length == 0) {
+    return (
+      <main>
+        <Nav />
+        <div className="flex flex-col items-center">
+          <p className="text-3xl text-center font-bold">Leaderboard</p>
+          <table className="mt-10 w-4/5">
+            <tbody className="w-full" id="data">
+              <tr className="w-full bg-slate-700 text-center">
+                <td className="p-2 rounded-sm">lol</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </main>
+    );
+  } else {
+    return (
+      <main>
+        <h1 className="m-5 text-3xl font-bold text-center">Loading...</h1>
+        <p className="font-symbol text-center text-6xl animate-spin"></p>
+      </main>
+    );
+  }
+}

src/components/nav.jsx

@@ -9,18 +9,17 @@ import {
   NavigationMenuViewport,
 } from "@/components/ui/navigation-menu"
 
-import config from "@/config";
 
 export default function Nav(){
   return (
     <NavigationMenu className="m-5 text-center">
       <NavigationMenuList>
         <NavigationMenuItem>
-          <a href="#/">Home</a>
+          <a href="#">Home</a>
         </NavigationMenuItem>
         <NavigationMenuItem>|</NavigationMenuItem>
         <NavigationMenuItem>
-          <a href="#/leaderboard">Leaderboard</a>
+          <a href="#leaderboard">Leaderboard</a>
         </NavigationMenuItem>
       </NavigationMenuList>
     </NavigationMenu>

src/index.jsx

@@ -1,13 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { RouterProvider, createHashRouter } from "react-router-dom";
 import App from "./App";
-// import Login from './Login'
+import "@/App.css"
+import Leaderboard from './Leaderboard'
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-console.log(window.location.hash);
+console.log(window.location.hash.toLowerCase());
 
-if (window.location.hash == "#/leaderboard") {
+if (window.location.hash.toLowerCase() == "#leaderboard") {
+  root.render(
+    <React.StrictMode>
+      <Leaderboard />
+    </React.StrictMode>
+  )
 } else {
   root.render(
     <React.StrictMode>

src/utils/leaderboard.js

@@ -0,0 +1,21 @@
+export const types = {
+  'kills': 'Kills',
+  'coins': 'Coins',
+  'playtime': 'Survived',
+  'xp': 'XP',
+  'total-coins': 'Total Coins',
+  'total-kills': 'Total Stabs',
+  'total-playtime': 'Total Playtime',
+}
+
+export const ranges = {
+  'all': 'All-Time',
+  'day': 'Past Day',
+  'week': 'Past Week',
+}
+
+const ApiUrl = "https://sb-api-fb48ef34a197.herokuapp.com/"
+
+export async function getLeaderboard(range, type){
+
+}