feat(pages): add lessons page

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="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"}
-            </p>
-          </div>
-        </div>
-      </main>
-    </div>
+    <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>
+      </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>
   );
 };