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

feat(pages): add rewards page)

Browse Source
This commit is contained in:
shafin-r
2026-01-18 19:23:48 +06:00
parent ce1e35a3cf
commit 9fd3a7b0e2
5 changed files with 774 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,100 @@
import { useAuthStore } from "../../stores/authStore";
// import { useAuthStore } from "../../stores/authStore";
import { useState } from "react";
// import {
// Card,
// CardHeader,
// CardContent,
// CardTitle,
// CardDescription,
// } from "../../components/ui/card";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "../../components/ui/tabs";
import { Button } from "../../components/ui//button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "../../components/ui/dropdown-menu";
import { formatTimeFilter } from "../../lib/utils";
export const Rewards = () => {
const user = useAuthStore((state) => state.user);
// const user = useAuthStore((state) => state.user);
const [time, setTime] = useState("bottom");
return (
<div className="min-h-screen bg-gray-50">
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-2xl font-bold text-gray-800 mb-4">Rewards</h2>
<div className="space-y-2 text-gray-600">
<p>Email: {user?.email}</p>
<p>Role: {user?.role}</p>
<p>Status: {user?.status}</p>
<p>
Member since:{" "}
{user?.joined_at
? new Date(user.joined_at).toLocaleDateString()
: "N/A"}
</p>
</div>
</div>
</main>
</div>
<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">
<h1 className="font-satoshi-black text-3xl">Leaderboards</h1>
<p className="font-satoshi-medium text-md text-gray-500">
Complete lessons to rise to the top.{" "}
<span className="underline">Start a lesson.</span>
</p>
</header>
<section className="">
<Tabs defaultValue="xp" className="w-full ">
<TabsList className="bg-transparent p-0 w-full justify-between ">
<TabsTrigger
value="xp"
className="font-satoshi-bold px-4 tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
>
XP
</TabsTrigger>
<TabsTrigger
value="questions"
className="font-satoshi-bold px-4 tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
>
Questions
</TabsTrigger>
<TabsTrigger
value="streak"
className="font-satoshi-bold px-4 tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
>
Streak
</TabsTrigger>
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-full px-6">
<Button
variant="outline"
className="font-satoshi-bold text-sm text-black"
>
{formatTimeFilter(time)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="font-satoshi">
<DropdownMenuRadioGroup value={time} onValueChange={setTime}>
<DropdownMenuRadioItem value="today">
Today
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="week">
Week
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="month">
Month
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="alltime">
All Time
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</TabsList>
<TabsContent value="xp">
<div className="space-y-6"></div>
</TabsContent>
<TabsContent value="questions">
<div className="space-y-6"></div>
</TabsContent>
<TabsContent value="streak"></TabsContent>
</Tabs>
</section>
</main>
);
};