Skip to content

Commit cbd46e9

Browse files
sabarixrsabarixr
authored
Merge pull request #23 from PinJinx/leaderboard
Added Leaderboard Page for Amfoss home
2 parents 17bda32 + aa2d488 commit cbd46e9

File tree

7 files changed

+208
-9
lines changed

7 files changed

+208
-9
lines changed

‎public/leaderboard.svg

Lines changed: 19 additions & 0 deletions
Loading

‎public/placeholder.webp

3.12 KB
Binary file not shown.

‎src/app/dashboard/cp-leaderboard.tsx

Lines changed: 69 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,70 @@
1-
const LeaderboardPage = () => {
2-
return (
3-
<>
4-
CP leaderboard
5-
</>
6-
);
1+
"use client";
2+
import { useState } from "react";
3+
4+
import {Profile,ProfileBottom} from "@/components/LeaderBoardProfiles"
5+
import dynamic from 'next/dynamic';
6+
7+
const LeaderboardTable = dynamic(() => import("@/components/LeaderboardTable"), {
8+
ssr: false,
9+
});
10+
11+
export default function LeaderBoard() {
12+
const [alltimemode, setmode] = useState(false);
13+
return (
14+
<div className="w-full overflow-hidden gap-7 flex flex-col items-center bg-bgMainColor">
15+
<h1 className="mt-5 text-center text-white text-[3rem] sm:text-[2.5rem] md:text-[4.2rem] lg:text-[5rem] font-medium">
16+
Leaderboard
17+
</h1>
18+
{/* Alltime/Monthly Switch */}
19+
<div className="flex justify-evenly items-center rounded-xl bg-LeaderBoardCommon w-[50%]">
20+
<button
21+
className={`transition-colors duration-300 flex w-[50%] justify-center items-center rounded-md ${
22+
alltimemode ? "bg-LeaderBoardCommonHigh" : "bg-LeaderBoardCommon"}`}
23+
onClick={() => setmode(!alltimemode)}
24+
>
25+
<p className="text-lg font-semibold text-white mt-2 ml-2 mb-2">
26+
Month
27+
</p>
28+
</button>
29+
<button
30+
className={`transition-colors duration-300 flex w-[50%] justify-center items-center rounded-md ${
31+
alltimemode ? "bg-LeaderBoardCommon" : "bg-LeaderBoardCommonHigh"}`}
32+
onClick={() => setmode(!alltimemode)}
33+
>
34+
<p className="text-lg font-semibold text-white mt-2 mr-2 mb-2">
35+
All Time
36+
</p>
37+
</button>
38+
</div>
39+
{/* Top 3 Board */}
40+
<div className="flex gap-[1%] sm:h-[200px] lg:h-[500px] lg:scale-100 sm:scale-[.38] md:scale-[.57] origin-top">
41+
<Profile mt={8} rank="Silver" />
42+
<Profile rank="Gold" />
43+
<Profile mt={10} rank="Bronze" />
44+
</div>
45+
<div className="flex justify-center items-center z-10 md:mt-16 rounded-xl bg-LeaderBoardCommonHigh]">
46+
<p className="text-lg sm:text-[1.5vh] md:text-[.8rem] lg:text-xl font-semibold text-white z-10 m-2">
47+
You have been placed at X rank with XXXX points.
48+
</p>
49+
</div>
50+
51+
52+
{/*Table*/}
53+
<div className="w-full">
54+
<LeaderboardTable/>
55+
</div>
56+
57+
{/*Wall of Shame*/}
58+
<p className="mt-5 text-center text-white text-[3rem] sm:text-[2.5rem] md:text-[4.2rem] lg:text-[5rem] font-medium">
59+
Wall of Shame
60+
</p>
61+
<div className="w-full">
62+
<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">
63+
<ProfileBottom />
64+
<ProfileBottom />
65+
<ProfileBottom />
66+
</div>
67+
</div>
68+
</div>
69+
);
770
}
8-
export default LeaderboardPage;

‎src/app/dashboard/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { SelectedButtonProvider } from '@/context/SelectedButtonContext';
77
const DashboardLayout = ({ children }: PropsWithChildren) => {
88
return (
99
<SelectedButtonProvider>
10-
<div className="flex h-screen w-screen overflow-hidden ">
11-
<div className='w-2/12'>
10+
<div className="flex min-h-screen w-full ">
11+
<div className='w-2/12 h-screen top-0 sticky'>
1212
<Sidebar />
1313
</div>
1414
{/* Content area will take the remaining space */}

‎src/components/LeaderBoardProfiles.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import Image from "next/image";
2+
import { Medal, Trophy } from "lucide-react";
3+
4+
function ProfileBottom({ imgpath = "/placeholder.webp", name = "Placeholder" }) {
5+
return (
6+
<div className="flex flex-col items-center w-full sm:w-auto scale-100 sm:scale-75">
7+
<div className="flex flex-col items-center justify-center relative">
8+
<Image
9+
src={imgpath}
10+
alt="profile"
11+
width={200}
12+
height={200}
13+
className="rounded-full z-10 mb-4"
14+
/>
15+
<p className="text-5xl z-10 text-white text-center">{name}</p>
16+
</div>
17+
<p className="text-base sm:text-2xl md:text-xl mt-3 text-center text-white gap-2">
18+
Points
19+
</p>
20+
</div>
21+
);
22+
}
23+
24+
function Profile({ mt = 0, rank = "" }) {
25+
const imgpath = "/placeholder.webp";
26+
const name = "Placeholder";
27+
let sticker = <Medal className="w-5 h-5" />;
28+
if (rank == "Gold") {
29+
sticker = <Trophy className="w-5 h-5" />;
30+
}
31+
return (
32+
<div className={`mt-${mt} scale-100 sm:scale-75`}>
33+
<div className="flex flex-col items-center justify-center relative">
34+
<div className="absolute w-[200px] h-[200px] rounded-md border-[20px] border-yellow-400 mb-4 blur-2xl"></div>
35+
<Image
36+
src={imgpath}
37+
alt="profile"
38+
width={200}
39+
height={200}
40+
className="rounded-md z-10 mb-4"
41+
/>
42+
<p className="text-5xl z-10 text-white text-center">{name}</p>
43+
</div>
44+
<div
45+
className="w-[250px] sm:w-[300px] h-[250px] sm:h-[300px] bg-cover bg-center flex flex-col items-center text-white"
46+
style={{ backgroundImage: "url('/leaderboard.svg')" }}
47+
>
48+
<p className="text-4xl font-semibold mt-8 text-white">{rank}</p>
49+
<hr className="border-[1.5px] border-yellow-400 w-[80%]" />
50+
<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">
51+
{sticker}Points
52+
</p>
53+
</div>
54+
</div>
55+
);
56+
}
57+
58+
export { ProfileBottom, Profile };

‎src/components/LeaderboardTable.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Trophy, Medal, Award, Icon } from "lucide-react";
2+
3+
export default function LeaderboardTable() {
4+
const placeholderlist = ["Player 1","Player 2","Player 3","Player 4","Player 5"]
5+
const players = placeholderlist.map((item,index)=>{
6+
let col="";
7+
let icon = <div className="w-5 h-5" />;
8+
if (index == 0) {
9+
col = "bg-LeaderBoardGold";
10+
icon = <Trophy className="w-5 h-5" />;
11+
} else if (index == 1) {
12+
col = "bg-LeaderBoardSilver";
13+
icon = <Medal className="w-5 h-5" />;
14+
} else if (index == 2) {
15+
col = "bg-LeaderBoardBronze";
16+
icon = <Medal className="w-5 h-5" />;
17+
} else {
18+
col = "bg-LeaderBoardCommon hover:bg-LeaderBoardCommonHigh";
19+
}
20+
return(
21+
<div
22+
key={index}
23+
className={`${col} rounded-md transition-transform duration-300 ease-in-out transform hover:scale-105`}
24+
>
25+
<div className="h-10 flex items-center justify-evenly rounded-md px-4">
26+
<p className="w-1/3 text-center text-white flex items-center justify-center gap-2 mr-3">
27+
<Award className="w-5 h-5" /> {index}
28+
</p>
29+
<p className="w-1/3 text-center text-white">{item}</p>
30+
<div className="w-1/3 text-center text-white flex items-center justify-center gap-2 ml-4">
31+
{icon}
32+
<p>{index * 1000}</p>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
})
38+
return (
39+
<div className="w-full flex flex-col items-center rounded-lg">
40+
<div className="w-[90%] sm:max-h-[400px] lg:max-h-[800px] overflow-y-auto rounded-lg">
41+
<table className="sticky top-0 z-40 w-full text-white border-collapse">
42+
<thead className="bg-LeaderBoardHead">
43+
<tr className="text-left ">
44+
<th className="px-4 py-2 text-center w-1/3">Rank</th>
45+
<th className="px-4 py-2 text-center w-1/3">Name</th>
46+
<th className="px-4 py-2 text-center w-1/3">Points</th>
47+
</tr>
48+
</thead>
49+
</table>
50+
<div className="w-full flex flex-col gap-1 p-2">{players}</div>
51+
</div>
52+
</div>
53+
);
54+
}

‎tailwind.config.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ export default {
1818
hoverPanelButtonColor: "#2B2A22",
1919
panelButtonColor: "#292929",
2020
goldenrod: "#daa520",
21+
LeaderBoardGold: "#EFBF04",
22+
LeaderBoardSilver: "#a1a1a1",
23+
LeaderBoardBronze: "#804A00",
24+
LeaderBoardCommon: "#232323",
25+
LeaderBoardCommonHigh: "#303030",
26+
2127
muted: {
2228
DEFAULT: "#6c757d",
2329
foreground: "#8a8d91",

0 commit comments

Comments
 (0)