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

feat(pages): add profile page

Browse Source 
fix(ui): fix minor ui bugs on some pages
This commit is contained in:
shafin-r
2026-01-19 14:06:05 +06:00
parent d208a9336f
commit d5a39add17
11 changed files with 154 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -53,11 +53,11 @@ function App() {
},
{
path: "/",
element: <Navigate to="/student" replace />,
element: <Navigate to="/student/home" replace />,
},
{
path: "*",
element: <Navigate to="/student" replace />,
element: <Navigate to="/student/home" replace />,
},
]);

20
src/components/ui/button.tsx
View File

@ -1,8 +1,8 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils"
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@ -33,8 +33,8 @@ const buttonVariants = cva(
variant: "default",
size: "default",
},
}
)
},
);
function Button({
className,
@ -44,9 +44,9 @@ function Button({
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "button"
const Comp = asChild ? Slot : "button";
return (
<Comp
@ -56,7 +56,7 @@ function Button({
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
);
}
export { Button, buttonVariants }
export { Button, buttonVariants };

2
src/components/ui/tabs.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/lib/utils";
import { cn } from "../../lib/utils";
function Tabs({
className,

46
src/lib/utils.ts
View File

@ -24,7 +24,7 @@ export function formatTimeFilter(time: string) {
case "month":
return "Month";
case "alltime":
return "All Time";
return "All";
default:
return "Today";
}
@ -32,14 +32,46 @@ export function formatTimeFilter(time: string) {
export function getRandomColor() {
const colors = [
"bg-red-700",
"bg-blue-700",
"bg-green-700",
"bg-yellow-700",
"bg-cyan-700",
"bg-lime-600",
"bg-green-500",
"bg-slate-700",
"bg-violet-600",
"bg-sky-500",
"bg-indigo-600",
"bg-gray-400",
"bg-red-500",
"bg-orange-500",
"bg-yellow-500",
"bg-teal-500",
"bg-blue-500",
"bg-purple-500",
"bg-pink-500",
"bg-rose-500",
"bg-amber-500",
"bg-emerald-500",
"bg-fuchsia-500",
"bg-lime-500",
"bg-cyan-500",
"bg-blue-600",
"bg-indigo-700",
"bg-purple-700",
"bg-pink-700",
"bg-indigo-700",
"bg-gray-700",
"bg-red-600",
"bg-orange-600",
"bg-yellow-600",
"bg-teal-600",
"bg-emerald-600",
"bg-rose-600",
"bg-amber-600",
"bg-fuchsia-600",
"bg-lime-700",
"bg-cyan-600",
"bg-blue-700",
"bg-indigo-800",
"bg-purple-800",
"bg-pink-800",
"bg-red-700",
];
return colors[Math.floor(Math.random() * colors.length)];
}

8
src/pages/auth/Login.tsx
View File

@ -23,7 +23,7 @@ export const Login = () => {
// Redirect if already authenticated
useEffect(() => {
if (isAuthenticated) {
navigate("/student", { replace: true });
navigate("/student/home", { replace: true });
}
}, [isAuthenticated, navigate]);
@ -49,8 +49,8 @@ export const Login = () => {
return (
<div className="min-h-screen flex items-center justify-center ">
<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm border border-gray-300">
<div className="flex justify-center mb-6">
<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm border border-gray-300 space-y-6">
<div className="flex justify-center">
<img
src="src/assets/ed_logo.png"
alt="EdBridge logo"
@ -120,7 +120,7 @@ export const Login = () => {
<button
onClick={handleSubmit}
disabled={isLoading || !email || !password}
className="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition font-medium disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center font-satoshi"
className="w-full bg-linear-to-br from-purple-500 to-purple-600 text-white py-3 rounded-2xl hover:bg-purple-700 transition font-medium disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center font-satoshi hover:cursor-pointer"
>
{isLoading ? (
<>

27
src/pages/student/Drills.tsx
View File

@ -7,7 +7,6 @@ import {
Trophy,
Zap,
} from "lucide-react";
import { useAuthStore } from "../../stores/authStore";
import {
Card,
CardAction,
@ -20,10 +19,8 @@ import {
import { Button } from "../../components/ui/button";
export const Drills = () => {
const user = useAuthStore((state) => state.user);
return (
<main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
<main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
<header className="flex justify-between items-center">
<div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
<BookOpen size={20} color="white" />
@ -39,7 +36,7 @@ export const Drills = () => {
flex-row"
>
<div className="space-y-4">
<CardHeader className="w-1/2">
<CardHeader className="w-[65%]">
<CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
See where you stand
</CardTitle>
@ -56,7 +53,7 @@ export const Drills = () => {
</Button>
</CardFooter>
</div>
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-10 -right-20">
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-7 -right-20">
<DraftingCompass size={300} color="white" />
</div>
</Card>
@ -69,8 +66,10 @@ export const Drills = () => {
<Target size={20} color="white" />
</div>
<div className="space-y-2">
<CardTitle>Targeted Practice</CardTitle>
<CardDescription>Focus on what matters</CardDescription>
<CardTitle className="font-satoshi">Targeted Practice</CardTitle>
<CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
</div>
<CardAction>
<div className="w-fit bg-red-100 p-2 rounded-full">
@ -85,8 +84,10 @@ export const Drills = () => {
<Zap size={20} color="white" />
</div>
<div className="space-y-2">
<CardTitle>Drills</CardTitle>
<CardDescription>Train speed and accuracy</CardDescription>
<CardTitle className="font-satoshi">Drills</CardTitle>
<CardDescription className="font-satoshi">
Train speed and accuracy
</CardDescription>
</div>
<CardAction>
<div className="w-fit bg-cyan-100 p-3 rounded-full">
@ -101,8 +102,10 @@ export const Drills = () => {
<Trophy size={20} color="white" />
</div>
<div className="space-y-2">
<CardTitle>Hard Test Modules</CardTitle>
<CardDescription>Focus on what matters</CardDescription>
<CardTitle className="font-satoshi">Hard Test Modules</CardTitle>
<CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
</div>
<CardAction>
<div className="w-fit bg-lime-100 p-3 rounded-full">

26
src/pages/student/Home.tsx
View File

@ -79,7 +79,7 @@ export const Home = () => {
return (
<div className="min-h-screen bg-gray-50">
<main className="flex flex-col gap-12 max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
<main className="flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8">
<h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
Welcome, {user?.name || "Student"}
</h1>
@ -87,7 +87,7 @@ export const Home = () => {
<input
type="text"
placeholder="Search..."
className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
/>
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<Search size={22} color="gray" />
@ -99,28 +99,28 @@ export const Home = () => {
</h1>
</section>
<section className="w-full">
<Tabs defaultValue="all" className="w-full ">
<Tabs defaultValue="all" className="w-full">
<TabsList className="bg-transparent p-0 w-full">
<TabsTrigger
value="all"
className="font-satoshi-regular 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"
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
>
All
</TabsTrigger>
<TabsTrigger
value="NOT_STARTED"
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
>
Not Started
</TabsTrigger>
<TabsTrigger
value="COMPLETED"
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
>
Completed
</TabsTrigger>
</TabsList>
<TabsContent value="all">
<TabsContent value="all" className="pt-6">
<div className="space-y-6">
{practiceSheets.length > 0 ? (
practiceSheets.map((sheet) => (
@ -152,7 +152,7 @@ export const Home = () => {
<CardFooter>
<Button
variant="outline"
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 text-white"
>
Start
</Button>
@ -168,7 +168,7 @@ export const Home = () => {
)}
</div>
</TabsContent>
<TabsContent value="NOT_STARTED">
<TabsContent value="NOT_STARTED" className="pt-6">
<div className="space-y-6">
{notStartedSheets.map((sheet) => (
<Card key={sheet?.id}>
@ -197,7 +197,7 @@ export const Home = () => {
<CardFooter>
<Button
variant="outline"
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
className="font-satoshi w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 rounded-3xl text-white"
>
Start
</Button>
@ -206,7 +206,7 @@ export const Home = () => {
))}
</div>
</TabsContent>
<TabsContent value="COMPLETED">
<TabsContent value="COMPLETED" className="pt-6">
{completedSheets.length > 0 ? (
completedSheets.map((sheet) => (
<Card key={sheet?.id}>
@ -237,7 +237,7 @@ export const Home = () => {
<CardFooter>
<Button
variant="outline"
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
className="font-satoshi w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 rounded-3xl text-white"
>
Start
</Button>
@ -260,7 +260,7 @@ export const Home = () => {
SAT Preparation Tips
</h1>
<section className="space-y-4">
<div className="flex items-center gap-2">
<div className="flex gap-2">
<CheckCircle size={24} color="#AD45FF" />
<p className="font-satoshi text-lg">
Practice regularly with official SAT materials

2
src/pages/student/Lessons.tsx
View File

@ -17,7 +17,7 @@ export const Lessons = () => {
// const user = useAuthStore((state) => state.user);
return (
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
<header className="space-y-2">
<h1 className="font-satoshi-black text-2xl">Lessons</h1>
<p className="font-satoshi-medium text-sm text-gray-500">

76
src/pages/student/Profile.tsx
View File

@ -1,26 +1,72 @@
import { ChevronRight } from "lucide-react";
import { useAuthStore } from "../../stores/authStore";
import { useNavigate } from "react-router-dom";
export const Profile = () => {
const user = useAuthStore((state) => state.user);
const navigate = useNavigate();
const handleLogout = () => {
useAuthStore.getState().logout();
navigate("/login");
};
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">Profile</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>
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
<h1 className="text-lg font-satoshi-bold text-center">Profile</h1>
<section>
<h3 className="text-2xl font-satoshi-bold">{user?.name}</h3>
<p className="text-lg font-satoshi">{user?.email}</p>
</section>
<section className="space-y-4">
<h5 className="text-[12px] font-satoshi-bold text-gray-400">ACCOUNT</h5>
<div className="border rounded-4xl">
<button className="w-full rounded-t-4xl border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Account details</span>
<ChevronRight color="gray" size={20} />
</button>
<button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Redeem a code</span>
<ChevronRight color="gray" size={20} />
</button>
<button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Manage subscription</span>
<ChevronRight color="gray" size={20} />
</button>
<button className="w-full rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Preferences</span>
<ChevronRight color="gray" size={20} />
</button>
</div>
</section>
<section className="space-y-4">
<h5 className="text-[12px] font-satoshi-bold text-gray-400">LEGAL</h5>
<div className="border rounded-4xl">
<button className="w-full border-b rounded-t-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Terms of Use</span>
<ChevronRight color="gray" size={20} />
</button>
<button className="w-full border-b rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Privacy Policy</span>
<ChevronRight color="gray" size={20} />
</button>
</div>
</section>
<section className="space-y-4">
<h5 className="text-[12px] font-satoshi-bold text-gray-400">SUPPORT</h5>
<div className="border rounded-4xl">
<button className="w-full rounded-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Contact Us</span>
<ChevronRight color="gray" size={20} />
</button>
</div>
</section>
<button
onClick={handleLogout}
className="w-full border rounded-4xl bg-purple-500 py-4 px-4 flex justify-center items-center active:bg-purple-600 font-satoshi-medium text-white"
>
Sign Out
</button>
</main>
</div>
);
};

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

@ -44,7 +44,7 @@ export const Rewards = () => {
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">
<main className="flex flex-col gap-8 items-start min-h-screen mx-auto px-8 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">

53
src/pages/student/StudentLayout.tsx
View File

@ -1,25 +1,7 @@
import { Outlet, NavLink, useNavigate } from "react-router-dom";
import {
Home,
BookOpen,
TrendingUp,
Award,
User,
Menu,
Video,
} from "lucide-react";
import { useAuthStore } from "../../stores/authStore";
import { Outlet, NavLink } from "react-router-dom";
import { Home, BookOpen, Award, User, Video } from "lucide-react";
export function StudentLayout() {
// const user = useAuthStore((state) => state.user);
const logout = useAuthStore((state) => state.logout);
const navigate = useNavigate();
const handleLogout = () => {
logout();
navigate("/login");
};
const navItems = [
{ to: "/student/home", icon: Home, label: "Home" },
{ to: "/student/drills", icon: BookOpen, label: "Drills" },
@ -30,38 +12,13 @@ export function StudentLayout() {
return (
<div className="flex flex-col min-h-screen bg-gray-50">
{/* Top Header */}
{/* <header className="bg-white shadow-sm sticky top-0 z-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-22">
<div className="flex items-center gap-3">
<img
src="../../src/assets/ed_logo.png"
alt="EdBridge logo"
className="h-10 w-auto object-contain"
draggable={false}
/>
</div>
<button
onClick={handleLogout}
className="flex items-center gap-2 text-slate-600 hover:text-slate-700 transition px-3 py-2 rounded-lg hover:bg-red-50"
>
<Menu size={22} />
<span className="text-sm font-medium hidden sm:inline">
Logout
</span>
</button>
</div>
</div>
</header> */}
{/* Main Content */}
<main className="flex-1 pb-20 overflow-y-auto">
<Outlet />
</main>
{/* Bottom Tab Navigation */}
<nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-20">
<nav className="fixed rounded-t-4xl pt-2 bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-4xl z-20">
<div className="max-w-7xl mx-auto px-2">
<div className="flex justify-around items-center">
{navItems.map((item) => (
@ -69,9 +26,9 @@ export function StudentLayout() {
key={item.to}
to={item.to}
className={({ isActive }) =>
`flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 ${
`flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 font-satoshi tracking-wide ${
isActive
? "text-indigo-600"
? "text-purple-600"
: "text-gray-500 hover:text-gray-700"
}`
}