Made changes to leaderboard

Author: PinJinx

src/app/dashboard/cp-leaderboard.tsx

@@ -1,8 +1,70 @@
-const LeaderboardPage = () => {
-    return (
-        <>
-            CP leaderboard
-        </>
-    );
+"use client";
+import { useState } from "react";
+
+import {Profile,ProfileBottom} from "@/components/LeaderBoardProfiles"
+import dynamic from 'next/dynamic';
+
+const LeaderboardTable = dynamic(() => import("@/components/LeaderboardTable"), {
+  ssr: false,
+});
+
+export default function LeaderBoard() {
+  const [alltimemode, setmode] = useState(false);
+  return (
+    <div className="w-full overflow-hidden gap-7 flex flex-col items-center bg-bgMainColor">
+      <h1 className="mt-5 text-center text-white text-[3rem] sm:text-[2.5rem] md:text-[4.2rem] lg:text-[5rem] font-medium">
+        Leaderboard
+      </h1>
+      {/* Alltime/Monthly Switch */}
+      <div className="flex justify-evenly items-center rounded-xl bg-LeaderBoardCommon w-[50%]">
+        <button
+          className={`transition-colors duration-300 flex w-[50%] justify-center items-center rounded-md ${
+            alltimemode ? "bg-LeaderBoardCommonHigh" : "bg-LeaderBoardCommon"}`}
+          onClick={() => setmode(!alltimemode)}
+        >
+          <p className="text-lg font-semibold text-white mt-2 ml-2 mb-2">
+            Month
+          </p>
+        </button>
+        <button
+          className={`transition-colors duration-300 flex w-[50%] justify-center items-center rounded-md ${
+            alltimemode ? "bg-LeaderBoardCommon" : "bg-LeaderBoardCommonHigh"}`}
+          onClick={() => setmode(!alltimemode)}
+        >
+          <p className="text-lg font-semibold  text-white mt-2 mr-2 mb-2">
+            All Time
+          </p>
+        </button>
+      </div>
+      {/* Top 3 Board */}
+      <div className="flex gap-[1%] sm:h-[200px] lg:h-[500px] lg:scale-100 sm:scale-[.38] md:scale-[.57] origin-top">
+        <Profile mt={8} rank="Silver" />
+        <Profile rank="Gold" />
+        <Profile mt={10} rank="Bronze" />
+      </div>
+      <div className="flex justify-center items-center z-10 md:mt-16 rounded-xl bg-LeaderBoardCommonHigh]">
+        <p className="text-lg sm:text-[1.5vh] md:text-[.8rem] lg:text-xl font-semibold  text-white z-10 m-2">
+          You have been placed at X rank with XXXX points.
+        </p>
+      </div>
+
+
+      {/*Table*/}
+      <div className="w-full">
+        <LeaderboardTable/>
+      </div>
+
+      {/*Wall of Shame*/}
+      <p className="mt-5 text-center text-white text-[3rem] sm:text-[2.5rem] md:text-[4.2rem] lg:text-[5rem] font-medium">
+        Wall of Shame
+      </p>
+      <div className="w-full">
+        <div className="flex flex-col md:scale-[.6] lg:scale-[1] md:flex-row justify-evenly items-center gap-4 sm:gap-6 md:gap-8 w-full">
+        <ProfileBottom />
+        <ProfileBottom />
+        <ProfileBottom />
+      </div>
+      </div>
+    </div>
+  );
 }
-export default LeaderboardPage;

src/app/dashboard/layout.tsx

@@ -7,8 +7,8 @@ import { SelectedButtonProvider } from '@/context/SelectedButtonContext';
 const DashboardLayout = ({ children }: PropsWithChildren) => {
     return (
         <SelectedButtonProvider>
-            <div className="flex h-screen w-screen overflow-hidden ">
-                <div className='w-2/12'>
+            <div className="flex min-h-screen w-full ">
+                <div className='w-2/12 h-screen top-0 sticky'>
                     <Sidebar />
                 </div>
                 {/* Content area will take the remaining space */}

src/app/leaderboard/layout.tsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+import { Medal, Trophy } from "lucide-react";
+
+function ProfileBottom({ imgpath = "/placeholder.webp", name = "Placeholder" }) {
+  return (
+    <div className="flex flex-col items-center w-full sm:w-auto scale-100 sm:scale-75">
+      <div className="flex flex-col items-center justify-center relative">
+        <Image
+          src={imgpath}
+          alt="profile"
+          width={200}
+          height={200}
+          className="rounded-full z-10 mb-4"
+        />
+        <p className="text-5xl z-10 text-white text-center">{name}</p>
+      </div>
+      <p className="text-base sm:text-2xl md:text-xl mt-3 text-center text-white gap-2">
+        Points
+      </p>
+    </div>
+  );
+}
+
+function Profile({ mt = 0, rank = "" }) {
+  const imgpath = "/placeholder.webp";
+  const name = "Placeholder";
+  let sticker = <Medal className="w-5 h-5" />;
+  if (rank == "Gold") {
+    sticker = <Trophy className="w-5 h-5" />;
+  }
+  return (
+    <div className={`mt-${mt} scale-100 sm:scale-75`}>
+      <div className="flex flex-col items-center justify-center relative">
+        <div className="absolute w-[200px] h-[200px] rounded-md border-[20px] border-yellow-400 mb-4 blur-2xl"></div>
+        <Image
+          src={imgpath}
+          alt="profile"
+          width={200}
+          height={200}
+          className="rounded-md z-10 mb-4"
+        />
+        <p className="text-5xl z-10 text-white text-center">{name}</p>
+      </div>
+      <div
+        className="w-[250px] sm:w-[300px] h-[250px] sm:h-[300px] bg-cover bg-center flex flex-col items-center text-white"
+        style={{ backgroundImage: "url('/leaderboard.svg')" }}
+      >
+        <p className="text-4xl font-semibold mt-8 text-white">{rank}</p>
+        <hr className="border-[1.5px] border-yellow-400 w-[80%]" />
+        <p className="text-base sm:text-2xl md:text-xl w-1/3 mt-3 text-center text-white flex items-center justify-center gap-2">
+          {sticker}Points
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export { ProfileBottom, Profile };