Added Leaderboard Page for Amfoss home #23

PinJinx · 2025-02-09T11:01:22Z

PR for Issue#15
Description:
=>This PR adds a Leader board page to amfoss home page where all the member's rank is listed and compared.
=>The leader board can be accessed at http://localhost:3000/leaderboard

Content Added:
-> A new page file and a layout file for the Leaderboard has been added to /src/app/leaderboard
-> An Image for the Leader board platforms has been added to /src/public

netlify · 2025-02-09T11:08:51Z

✅ Deploy Preview for zingy-speculoos-372a93 ready!

Name	Link
🔨 Latest commit	`aa2d488`
🔍 Latest deploy log	https://app.netlify.com/sites/zingy-speculoos-372a93/deploys/67c0803e4a70980008ff3ce3
😎 Deploy Preview	https://deploy-preview-23--zingy-speculoos-372a93.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

sabarixr · 2025-02-26T19:26:31Z

src/app/leaderboard/page.tsx

+import { Trophy, Award, Medal, Ribbon } from "lucide-react";
+import { useState } from "react";
+
+export default function Home() {


why is this page named Home, it should be LeaderBoard

sabarixr · 2025-02-26T19:28:07Z

src/app/leaderboard/page.tsx

+  const [alltimemode, setmode] = useState(false);
+
+  return (
+    <li className="w-full overflow-hidden gap-7 flex flex-col items-center bg-[#161616]">


why is this a list item when there is no ul or ol present

sabarixr · 2025-02-26T19:30:43Z

src/app/leaderboard/page.tsx

+
+  return (
+    <li className="w-full overflow-hidden gap-7 flex flex-col items-center bg-[#161616]">
+      <p className="mt-5 text-center text-white text-[3rem] sm:text-[2.5rem] md:text-[4.2rem] lg:text-[5rem] font-medium">


this is a bit verbose, try to use inbuilt tailwind classes and lessen the no of breakpoints, also when it is a heading try to use <h1>

sabarixr · 2025-02-26T19:38:44Z

src/app/leaderboard/page.tsx

+          </p>
+        </button>
+        <button
+          style={{ backgroundColor: !alltimemode ? "#292929" : "#1C1C1C" }}


having hardcoded colors makes it hard to manage the colors on a later update, add the color to tailwind.config.js and use tailwind conditional classes
eg:

Suggested change

style={{ backgroundColor: !alltimemode ? "#292929" : "#1C1C1C" }}

className={`transition-colors duration-300 flex w-[50%] justify-center items-center rounded-md ${

alltimemode ? "bg-somecolor" : "bg-othercolor"

}`}

}`}

sabarixr · 2025-02-26T19:41:58Z

src/app/leaderboard/page.tsx

+function ProfileBottom() {
+  const imgpath = "/placeholder.webp";
+  const 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 style={{ marginTop: `${mt}rem` }} className="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>
+  );
+}


make a separate component for this

sabarixr · 2025-02-26T19:42:57Z

src/app/leaderboard/page.tsx

+    sticker = <Trophy className="w-5 h-5" />;
+  }
+  return (
+    <div style={{ marginTop: `${mt}rem` }} className="scale-100 sm:scale-75">


use tailwind conditional classes

sabarixr · 2025-02-26T19:44:52Z

src/app/leaderboard/page.tsx

+  const imgpath = "/placeholder.webp";
+  const name = "Placeholder";


placeholder is fine but shouldn´t the component need to accept actual image path when its available

sabarixr · 2025-02-26T19:46:54Z

src/app/leaderboard/page.tsx

+  const imgpath = "/placeholder.webp";
+  const name = "Placeholder";
+  let sticker = <Medal className="w-5 h-5" />;
+  if (rank == "Gold") {


why does this only handle gold, what about silver and bronze

sabarixr · 2025-02-26T19:53:41Z

src/app/leaderboard/page.tsx

+function Table() {
+  let players = [];
+  for (let i = 1; i <= 100; i++) {
+    let col = "";
+    let k = <div className="w-5 h-5" />;
+    if (i == 1) {
+      col = "#EFBF04";
+      k = <Trophy className="w-5 h-5" />;
+    } else if (i == 2) {
+      col = "#a1a1a1";
+      k = <Medal className="w-5 h-5" />;
+    } else if (i == 3) {
+      col = "#804A00";
+      k = <Medal className="w-5 h-5" />;
+    } else {
+      col = "#232323";
+    }
+    players.push(
+      <div
+        key={i}
+        style={{ backgroundColor: col }}
+        className="hover:bg-[#303030] rounded-md transition-transform duration-300 ease-in-out transform hover:scale-105"
+      >
+        <div className="h-10 flex items-center justify-evenly rounded-md px-4">
+          <p className="w-1/3 text-center text-white flex items-center justify-center gap-2 mr-3">
+            <Award className="w-5 h-5" /> {i}
+          </p>
+          <p className="w-1/3 text-center text-white">Player</p>
+          <div className="w-1/3 text-center text-white flex items-center justify-center gap-2 ml-4">
+            {k}
+            <p>{i * 1000}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full flex flex-col items-center  rounded-lg">
+      <div className="w-[90%] sm:max-h-[400px] lg:max-h-[800px] overflow-y-auto  rounded-lg">
+        <table className="sticky top-0 z-40 w-full text-white border-collapse">
+          <thead className="bg-[#161616]">
+            <tr className="text-left ">
+              <th className="px-4 py-2 text-center w-1/3">Rank</th>
+              <th className="px-4 py-2 text-center w-1/3">Name</th>
+              <th className="px-4 py-2 text-center w-1/3">Points</th>
+            </tr>
+          </thead>
+        </table>
+        <div className="w-full flex flex-col gap-1 p-2">{players}</div>
+      </div>
+    </div>
+  );
+}


this is quite expensive to load, and when we have actual data a for loop will be too much, use .map() and make this an another component and dynamically import it to reduce re render on every change.

Added Leaderboard Page

8afd57b

UI changes: Background changed Leaderboard tweeked

2fc2887

sabarixr requested changes Feb 26, 2025

View reviewed changes

Made changes to leaderboard

aa2d488

sabarixr approved these changes Feb 28, 2025

View reviewed changes

sabarixr merged commit cbd46e9 into amfoss:main Feb 28, 2025
16 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Added Leaderboard Page for Amfoss home #23

Added Leaderboard Page for Amfoss home #23

Uh oh!

PinJinx commented Feb 9, 2025

Uh oh!

netlify bot commented Feb 9, 2025 •

edited

Loading

Uh oh!

sabarixr Feb 26, 2025

Uh oh!

sabarixr Feb 26, 2025

Uh oh!

sabarixr Feb 26, 2025

Uh oh!

sabarixr Feb 26, 2025

Uh oh!

sabarixr Feb 26, 2025

Uh oh!

sabarixr Feb 26, 2025

Uh oh!

sabarixr Feb 26, 2025

Uh oh!

sabarixr Feb 26, 2025

Uh oh!

sabarixr Feb 26, 2025

Uh oh!

Uh oh!

Uh oh!

-          style={{ backgroundColor: !alltimemode ? "#292929" : "#1C1C1C" }}
+         className={`transition-colors duration-300 flex w-[50%] justify-center items-center rounded-md ${
+  alltimemode ? "bg-somecolor" : "bg-othercolor"
+}`}

		const imgpath = "/placeholder.webp";
		const name = "Placeholder";

Added Leaderboard Page for Amfoss home #23

Added Leaderboard Page for Amfoss home #23

Uh oh!

Conversation

PinJinx commented Feb 9, 2025

Uh oh!

netlify bot commented Feb 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for zingy-speculoos-372a93 ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

netlify bot commented Feb 9, 2025 •

edited

Loading