feat(pages): add lessons page

src/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
+import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+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]",
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-0.75",
-        className
+        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",
+        "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
+        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 };

src/pages/student/Home.tsx

@@ -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"

src/pages/student/Lessons.tsx

@@ -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="min-h-screen space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <header className="space-y-2">
-        <div className="bg-white rounded-lg shadow p-6">
+        <h1 className="font-satoshi-black text-2xl">Lessons</h1>
-          <h2 className="text-2xl font-bold text-gray-800 mb-4">Lessons</h2>
+        <p className="font-satoshi-medium text-sm text-gray-500">
-          <div className="space-y-2 text-gray-600">
+          Browse step-by-step lessons from expert Edbridge tutors and pick up
-            <p>Email: {user?.email}</p>
+          tips to tackle similar questions with confidence.
-            <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>
+      </header>
-        </div>
+      <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>
   );
 };