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

feat(pages): add lessons page

Browse Source
This commit is contained in:
shafin-r
2026-01-18 18:54:25 +06:00
parent 398cb33f2e
commit ce1e35a3cf
4 changed files with 88 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/Video-Placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

24
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 * 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,
@ -13,7 +13,7 @@ function Tabs({
className={cn("flex flex-col gap-2", className)}
{...props}
/>
)
);
}
function TabsList({
@ -24,12 +24,12 @@ function TabsList({
<TabsPrimitive.List
data-slot="tabs-list"
className={cn(
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
className
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-0.75",
className,
)}
{...props}
/>
)
);
}
function TabsTrigger({
@ -40,12 +40,12 @@ function TabsTrigger({
<TabsPrimitive.Trigger
data-slot="tabs-trigger"
className={cn(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
"data-[state=active]:bg-transparent dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%+20px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
/>
)
);
}
function TabsContent({
@ -58,7 +58,7 @@ function TabsContent({
className={cn("flex-1 outline-none", className)}
{...props}
/>
)
);
}
export { Tabs, TabsList, TabsTrigger, TabsContent }
export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@ -35,13 +35,13 @@ export const Home = () => {
useEffect(() => {
const sortPracticeSheets = (sheets: PracticeSheet[]) => {
const notStarted = sheets.filter(
(sheet) => sheet.user_status === "NOT_STARTED"
(sheet) => sheet.user_status === "NOT_STARTED",
);
const inProgress = sheets.filter(
(sheet) => sheet.user_status === "in-progress"
(sheet) => sheet.user_status === "in-progress",
);
const completed = sheets.filter(
(sheet) => sheet.user_status === "completed"
(sheet) => sheet.user_status === "completed",
);
setNotStartedSheets(notStarted);
@ -100,7 +100,7 @@ export const Home = () => {
</section>
<section className="w-full">
<Tabs defaultValue="all" className="w-full ">
<TabsList className="bg-transparent border-b rounded-none p-0 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"

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

@ -1,26 +1,78 @@
import { useAuthStore } from "../../stores/authStore";
// import { useAuthStore } from "../../stores/authStore";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "../../components/ui/card";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "../../components/ui/tabs";
export const Lessons = () => {
const user = useAuthStore((state) => state.user);
// const user = useAuthStore((state) => state.user);
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">Lessons</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"}
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<header className="space-y-2">
<h1 className="font-satoshi-black text-2xl">Lessons</h1>
<p className="font-satoshi-medium text-sm text-gray-500">
Browse step-by-step lessons from expert Edbridge tutors and pick up
tips to tackle similar questions with confidence.
</p>
</div>
</div>
</header>
<section>
<Tabs defaultValue="rw">
<TabsList className="bg-transparent space-x-4">
<TabsTrigger
value="rw"
className="font-satoshi-bold px-2 tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-purple-800 data-[state=active]:bg-transparent data-[state=active]:text-purple-800"
>
Reading & Writing
</TabsTrigger>
<TabsTrigger
value="math"
className="font-satoshi-bold px-2 tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
>
Math
</TabsTrigger>
</TabsList>
<TabsContent value="rw" className="pt-4">
<Card className="py-0 pb-8 rounded-4xl overflow-hidden">
<CardHeader className="w-full py-0 px-0">
<img
src="https://placehold.co/600x400"
alt="Video Thumbnail"
className="w-full h-auto rounded"
/>
</CardHeader>
<CardContent className="space-y-2">
<CardTitle>Video Title</CardTitle>
<CardDescription>Video Description</CardDescription>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="math" className="pt-4">
<Card className="py-0 pb-8 rounded-4xl overflow-hidden">
<CardHeader className="w-full py-0 px-0">
<img
src="https://placehold.co/600x400"
alt="Video Thumbnail"
className="w-full h-auto rounded"
/>
</CardHeader>
<CardContent className="space-y-2">
<CardTitle>Video Title</CardTitle>
<CardDescription>Video Description</CardDescription>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</section>
</main>
</div>
);
};