shafin808s/edbridge-scholars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(leaderboard): fix leaderboard mapping

Browse Source
This commit is contained in:
shafin-r
2026-01-19 10:35:51 +06:00
parent 9fd3a7b0e2
commit d208a9336f
12 changed files with 300 additions and 3184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/pages/student/Rewards.tsx
View File

@ -1,4 +1,7 @@
// import { useAuthStore } from "../../stores/authStore";
import { useAuthStore } from "../../stores/authStore";
import firstTrophy from "../../assets/icons/first_trophy.png";
import secondTrophy from "../../assets/icons/second_trophy.png";
import thirdTrophy from "../../assets/icons/third_trophy.png";
import { useState } from "react";
// import {
@ -23,12 +26,23 @@ import {
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "../../components/ui/dropdown-menu";
import { formatTimeFilter } from "../../lib/utils";
import { formatTimeFilter, getRandomColor } from "../../lib/utils";
import { Avatar, AvatarFallback } from "../../components/ui/avatar";
import { Zap } from "lucide-react";
export const Rewards = () => {
// const user = useAuthStore((state) => state.user);
const user = useAuthStore((state) => state.user);
const [time, setTime] = useState("bottom");
const leaderboard = [
{ id: 1, name: "Alice", xp: 587 },
{ id: 2, name: "Bob", xp: 560 },
{ id: 3, name: "Charlie", xp: 540 },
{ id: 4, name: "David", xp: 510 },
{ id: 5, name: "Emma", xp: 495 },
];
const trophies = [firstTrophy, secondTrophy, thirdTrophy];
return (
<main className="flex flex-col gap-8 items-start min-h-screen mx-auto px-4 sm:px-6 lg:px-8 py-8">
<header className="flex flex-col items-center h-fit w-full gap-3">
@ -38,8 +52,8 @@ export const Rewards = () => {
<span className="underline">Start a lesson.</span>
</p>
</header>
<section className="">
<Tabs defaultValue="xp" className="w-full ">
<section className="w-full">
<Tabs defaultValue="xp" className="space-y-6">
<TabsList className="bg-transparent p-0 w-full justify-between ">
<TabsTrigger
value="xp"
@ -86,13 +100,129 @@ export const Rewards = () => {
</DropdownMenuContent>
</DropdownMenu>
</TabsList>
<TabsContent value="xp">
<div className="space-y-6"></div>
<TabsContent value="xp" className="space-y-6">
{leaderboard.map((user, index) => {
const isTopThree = index < 3;
return (
<div
key={user.id}
className="flex justify-between items-center"
>
<div className="flex items-center gap-3">
{isTopThree ? (
<img
src={trophies[index]}
alt={`trophy_${index + 1}`}
className="w-12 h-12"
/>
) : (
<span className="w-12 text-center font-satoshi-bold text-gray-400">
{index + 1}
</span>
)}
<Avatar className={`p-6 ${getRandomColor()}`}>
<AvatarFallback className="text-white font-satoshi-bold">
{user.name.slice(0, 1).toUpperCase()}
</AvatarFallback>
</Avatar>
<p className="font-satoshi-medium text-gray-600">
{user.name}
</p>
</div>
<div className="flex items-center gap-1">
<p className="font-satoshi-medium">{user.xp}</p>
<Zap size={20} color="darkgreen" />
</div>
</div>
);
})}
</TabsContent>
<TabsContent value="questions">
<div className="space-y-6"></div>
<TabsContent value="questions" className="space-y-6">
{leaderboard.map((user, index) => {
const isTopThree = index < 3;
return (
<div
key={user.id}
className="flex justify-between items-center"
>
<div className="flex items-center gap-3">
{isTopThree ? (
<img
src={trophies[index]}
alt={`trophy_${index + 1}`}
className="w-12 h-12"
/>
) : (
<span className="w-12 text-center font-satoshi-bold text-gray-400">
{index + 1}
</span>
)}
<Avatar className={`p-6 ${getRandomColor()}`}>
<AvatarFallback className="text-white font-satoshi-bold">
{user.name.slice(0, 1).toUpperCase()}
</AvatarFallback>
</Avatar>
<p className="font-satoshi-medium text-gray-600">
{user.name}
</p>
</div>
<div className="flex items-center gap-1">
<p className="font-satoshi-medium">{user.xp}</p>
<Zap size={20} color="darkgreen" />
</div>
</div>
);
})}
</TabsContent>
<TabsContent value="streak" className="space-y-6">
{leaderboard.map((user, index) => {
const isTopThree = index < 3;
return (
<div
key={user.id}
className="flex justify-between items-center"
>
<div className="flex items-center gap-3">
{isTopThree ? (
<img
src={trophies[index]}
alt={`trophy_${index + 1}`}
className="w-12 h-12"
/>
) : (
<span className="w-12 text-center font-satoshi-bold text-gray-400">
{index + 1}
</span>
)}
<Avatar className={`p-6 ${getRandomColor()}`}>
<AvatarFallback className="text-white font-satoshi-bold">
{user.name.slice(0, 1).toUpperCase()}
</AvatarFallback>
</Avatar>
<p className="font-satoshi-medium text-gray-600">
{user.name}
</p>
</div>
<div className="flex items-center gap-1">
<p className="font-satoshi-medium">{user.xp}</p>
<Zap size={20} color="darkgreen" />
</div>
</div>
);
})}
</TabsContent>
<TabsContent value="streak"></TabsContent>
</Tabs>
</section>
</main>