feat(practice-sheets): add card-based ui for practice sheets

src/pages/student/Home.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import {
   Tabs,
   TabsTrigger,
@@ -6,12 +7,52 @@ import {
 } from "../../components/ui/tabs";
 import { useAuthStore } from "../../stores/authStore";
 import { Search } from "lucide-react";
+import { api } from "../../utils/api";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
 
 export const Home = () => {
   const user = useAuthStore((state) => state.user);
+  const [practiceSheets, setPracticeSheets] = useState([]);
   // const logout = useAuthStore((state) => state.logout);
   // const navigate = useNavigate();
 
+  useEffect(() => {
+    const fetchPracticeSheets = async () => {
+      if (!user) return;
+
+      try {
+        const authStorage = localStorage.getItem("auth-storage");
+        if (!authStorage) {
+          console.error("authStorage not found in local storage");
+          return;
+        }
+        const {
+          state: { token },
+        } = JSON.parse(authStorage);
+        if (!token) {
+          console.error("Token not found in authStorage");
+          return;
+        }
+        const sheets = await api.getPracticeSheets(token, 1, 10);
+        setPracticeSheets(sheets.data);
+      } catch (error) {
+        console.error("Error fetching practice sheets:", error);
+      }
+    };
+
+    fetchPracticeSheets();
+  }, [user]);
+
   return (
     <div className="min-h-screen bg-gray-50">
       <main className="flex flex-col items-center justify-center gap-12 max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -29,7 +70,7 @@ export const Home = () => {
           </div>
         </div>
         <div>
-          <Tabs defaultValue="all" className="w-full">
+          <Tabs defaultValue="all" className="w-full space-y-4">
             <TabsList className="bg-transparent border-b rounded-none p-0">
               <TabsTrigger
                 value="all"
@@ -60,7 +101,42 @@ export const Home = () => {
               </TabsTrigger>
             </TabsList>
             <TabsContent value="all">
-              <h1>All Status</h1>
+              <div className="space-y-6">
+                {practiceSheets.map((sheet) => (
+                  <Card key={sheet?.id}>
+                    <CardHeader>
+                      <CardTitle className="font-satoshi-medium text-xl">
+                        {sheet?.title}
+                      </CardTitle>
+                      <CardDescription className="font-satoshi">
+                        {sheet?.subject}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex justify-between">
+                      <p className="font-satoshi text-gray-700">Not Started</p>
+                      <Badge
+                        variant="secondary"
+                        className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide  "
+                      >
+                        {sheet?.modules_count} modules
+                      </Badge>
+                    </CardContent>
+                    <CardContent>
+                      <p className="font-satoshi text-gray-700">
+                        {sheet?.time_limit} minutes
+                      </p>
+                    </CardContent>
+                    <CardFooter>
+                      <Button
+                        variant="outline"
+                        className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
+                      >
+                        Start
+                      </Button>
+                    </CardFooter>
+                  </Card>
+                ))}
+              </div>
             </TabsContent>
             <TabsContent value="not-started">
               <h1>Not Started</h1>