feat(pages): add pretest screen

src/pages/student/Home.tsx

@@ -20,13 +20,14 @@ import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import type { PracticeSheet } from "../../types/sheet";
 import { formatStatus } from "../../lib/utils";
+import { useNavigate } from "react-router-dom";
 
 export const Home = () => {
   const user = useAuthStore((state) => state.user);
+  const navigate = useNavigate();
 
   // const logout = useAuthStore((state) => state.logout);
   // const navigate = useNavigate();
-
   const [practiceSheets, setPracticeSheets] = useState<PracticeSheet[]>([]);
   const [notStartedSheets, setNotStartedSheets] = useState<PracticeSheet[]>([]);
   const [inProgressSheets, setInProgressSheets] = useState<PracticeSheet[]>([]);
@@ -77,6 +78,10 @@ export const Home = () => {
     fetchPracticeSheets();
   }, [user]);
 
+  const handleStartPractice = (sheetId: string) => {
+    navigate(`/student/practice/${sheetId}`);
+  };
+
   return (
     <div className="min-h-screen bg-gray-50">
       <main className="flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8">
@@ -124,7 +129,7 @@ export const Home = () => {
               <div className="space-y-6">
                 {practiceSheets.length > 0 ? (
                   practiceSheets.map((sheet) => (
-                    <Card key={sheet?.id}>
+                    <Card key={sheet?.id} className="rounded-4xl">
                       <CardHeader>
                         <CardTitle className="font-satoshi-medium text-xl">
                           {sheet?.title}
@@ -151,6 +156,7 @@ export const Home = () => {
                       </CardContent>
                       <CardFooter>
                         <Button
+                          onClick={() => handleStartPractice(sheet?.id)}
                           variant="outline"
                           className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 text-white"
                         >
@@ -171,7 +177,7 @@ export const Home = () => {
             <TabsContent value="NOT_STARTED" className="pt-6">
               <div className="space-y-6">
                 {notStartedSheets.map((sheet) => (
-                  <Card key={sheet?.id}>
+                  <Card key={sheet?.id} className="rounded-4xl">
                     <CardHeader>
                       <CardTitle className="font-satoshi-medium text-xl">
                         {sheet?.title}
@@ -209,7 +215,7 @@ export const Home = () => {
             <TabsContent value="COMPLETED" className="pt-6">
               {completedSheets.length > 0 ? (
                 completedSheets.map((sheet) => (
-                  <Card key={sheet?.id}>
+                  <Card key={sheet?.id} className="rounded-4xl">
                     <CardHeader>
                       <CardTitle className="font-satoshi-medium text-xl">
                         {sheet?.title}
@@ -262,29 +268,29 @@ export const Home = () => {
           <section className="space-y-4">
             <div className="flex gap-2">
               <CheckCircle size={24} color="#AD45FF" />
-              <p className="font-satoshi text-lg">
+              <p className="font-satoshi text-md">
                 Practice regularly with official SAT materials
               </p>
             </div>
             <div className="flex items-center gap-2">
               <CheckCircle size={24} color="#AD45FF" />
-              <p className="font-satoshi text-lg">
+              <p className="font-satoshi text-md">
                 Review your mistakes and learn from them
               </p>
             </div>
             <div className="flex items-center gap-2">
               <CheckCircle size={24} color="#AD45FF" />
-              <p className="font-satoshi text-lg">Focus on your weak areas</p>
+              <p className="font-satoshi text-md">Focus on your weak areas</p>
             </div>
             <div className="flex items-center gap-2">
               <CheckCircle size={24} color="#AD45FF" />
-              <p className="font-satoshi text-lg">
+              <p className="font-satoshi text-md">
                 Take full-length practice tests
               </p>
             </div>
             <div className="flex items-center gap-2">
               <CheckCircle size={24} color="#AD45FF" />
-              <p className="font-satoshi text-lg">
+              <p className="font-satoshi text-md">
                 Get plenty of rest before the test day
               </p>
             </div>

src/pages/student/Practice.tsx

@@ -18,7 +18,7 @@ import {
 } from "../../components/ui/card";
 import { Button } from "../../components/ui/button";
 
-export const Drills = () => {
+export const Practice = () => {
   return (
     <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">
@@ -60,7 +60,7 @@ export const Drills = () => {
       </section>
       <section className="flex flex-col gap-6">
         <h1 className="font-satoshi-black text-2xl">Practice your way</h1>
-        <Card className="rounded-4xl">
+        <Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
           <CardHeader className="space-y-3">
             <div className="w-fit bg-linear-to-br from-red-400 to-red-500 p-3 rounded-2xl">
               <Target size={20} color="white" />
@@ -78,7 +78,7 @@ export const Drills = () => {
             </CardAction>
           </CardHeader>
         </Card>
-        <Card className="rounded-4xl">
+        <Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
           <CardHeader className="space-y-3">
             <div className="w-fit bg-linear-to-br from-cyan-400 to-cyan-500 p-3 rounded-2xl">
               <Zap size={20} color="white" />
@@ -96,7 +96,7 @@ export const Drills = () => {
             </CardAction>
           </CardHeader>
         </Card>
-        <Card className="rounded-4xl">
+        <Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
           <CardHeader className="space-y-3">
             <div className="w-fit bg-linear-to-br from-lime-400 to-lime-500 p-3 rounded-2xl">
               <Trophy size={20} color="white" />

src/pages/student/StudentLayout.tsx

@@ -4,7 +4,7 @@ import { Home, BookOpen, Award, User, Video } from "lucide-react";
 export function StudentLayout() {
   const navItems = [
     { to: "/student/home", icon: Home, label: "Home" },
-    { to: "/student/drills", icon: BookOpen, label: "Drills" },
+    { to: "/student/practice", icon: BookOpen, label: "Practice" },
     { to: "/student/lessons", icon: Video, label: "Lessons" },
     { to: "/student/rewards", icon: Award, label: "Rewards" },
     { to: "/student/profile", icon: User, label: "Profile" },

src/pages/student/practice/Pretest.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { api } from "../../../utils/api";
+import { useAuthStore } from "../../../stores/authStore";
+import type { PracticeSheet } from "../../../types/sheet";
+import { CircleQuestionMark, Clock, Layers, Tag } from "lucide-react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from "../../../components/ui/carousel";
+import { Button } from "../../../components/ui/button";
+
+export const Pretest = () => {
+  const user = useAuthStore((state) => state.user);
+  const { sheetId } = useParams<{ sheetId: string }>();
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
+    null,
+  );
+
+  function handleStartTest(sheetId: string) {
+    console.log("Starting test for Practice Sheet. ID: ", sheetId);
+  }
+
+  useEffect(() => {
+    if (!user) return;
+    async function fetchPracticeSheet(sheetId: string) {
+      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 data = await api.getPracticeSheetById(token, sheetId);
+      setPracticeSheet(data);
+    }
+    fetchPracticeSheet(sheetId!);
+  }, [sheetId]);
+
+  useEffect(() => {
+    if (!carouselApi) {
+      return;
+    }
+    setCount(carouselApi.scrollSnapList().length);
+    setCurrent(carouselApi.selectedScrollSnap() + 1);
+    carouselApi.on("select", () => {
+      setCurrent(carouselApi.selectedScrollSnap() + 1);
+    });
+  }, [carouselApi]);
+
+  return (
+    <main className="max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-6">
+      <header className="space-y-2">
+        <h1 className="text-4xl font-satoshi-bold">{practiceSheet?.title}</h1>
+        <p className="text-lg font-satoshi text-gray-700">
+          {practiceSheet?.description}
+        </p>
+      </header>
+      <section className="flex flex-col gap-6 rounded-4xl bg-white border p-8">
+        <div className="flex items-center gap-4">
+          <Clock size={65} color="black" />
+          <div>
+            <h3 className="text-3xl font-satoshi-bold ">
+              {practiceSheet?.time_limit}
+            </h3>
+            <p className="text-xl font-satoshi ">Minutes</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <Layers size={65} color="black" />
+          <div>
+            <h3 className="text-3xl font-satoshi-bold ">
+              {practiceSheet?.modules.length}
+            </h3>
+            <p className="text-xl font-satoshi">Modules</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <CircleQuestionMark size={65} color="black" />
+          <div>
+            <h3 className="text-3xl font-satoshi-bold ">
+              {practiceSheet?.questions_count}
+            </h3>
+            <p className="text-xl font-satoshi ">Questions</p>
+          </div>
+        </div>
+      </section>
+      <Carousel setApi={setCarouselApi}>
+        <CarouselContent className="">
+          {practiceSheet ? (
+            practiceSheet.modules.length > 0 ? (
+              practiceSheet.modules.map((module, index) => (
+                <CarouselItem key={index} className="">
+                  <section className="flex flex-col gap-6 rounded-4xl p-8 bg-white border">
+                    <h1 className="text-2xl font-satoshi-bold">
+                      Section {Math.floor(index / 2) + 1}
+                    </h1>
+                    <p className="text-lg font-satoshi text-gray-700">
+                      {module.title}
+                    </p>
+                    <section className="flex justify-between">
+                      <div className="flex flex-col justify-center items-center gap-4">
+                        <div className="w-fit bg-cyan-100 p-2 rounded-full">
+                          <Clock size={30} color="oklch(60.9% 0.126 221.723)" />
+                        </div>
+                        <div className="flex flex-col justify-center items-center">
+                          <h3 className="text-xl font-satoshi-bold ">
+                            {module.duration}
+                          </h3>
+                          <p className="text-md font-satoshi ">Minutes</p>
+                        </div>
+                      </div>
+                      <div className="flex flex-col justify-center items-center gap-4">
+                        <div className="w-fit bg-lime-100 p-2 rounded-full">
+                          <CircleQuestionMark
+                            size={30}
+                            color="oklch(64.8% 0.2 131.684)"
+                          />
+                        </div>
+                        <div className="flex flex-col justify-center items-center">
+                          <h3 className="text-xl font-satoshi-bold ">
+                            {module.questions.length}
+                          </h3>
+                          <p className="text-md font-satoshi">Questions</p>
+                        </div>
+                      </div>
+                      <div className="flex flex-col justify-center items-center gap-4">
+                        <div className="w-fit bg-amber-100 p-2 rounded-full">
+                          <Tag size={30} color="oklch(66.6% 0.179 58.318)" />
+                        </div>
+                        <div className="flex flex-col justify-center items-center">
+                          <h3 className="text-xl font-satoshi-bold ">
+                            {module.section}
+                          </h3>
+                          <p className="text-md font-satoshi">Type</p>
+                        </div>
+                      </div>
+                    </section>
+                  </section>
+                </CarouselItem>
+              ))
+            ) : (
+              <CarouselItem>
+                <section className="w-full rounded-4xl p-8 bg-red-100 border border-red-300">
+                  <h1 className="text-lg text-center font-satoshi-bold text-red-500">
+                    No modules available.
+                  </h1>
+                </section>
+              </CarouselItem>
+            )
+          ) : (
+            <CarouselItem>
+              <section className="flex flex-col w-full rounded-4xl p-8 bg-yellow-100 border">
+                <h1 className="text-center text-xl font-satoshi-bold text-yellow-500">
+                  Loading...
+                </h1>
+              </section>
+            </CarouselItem>
+          )}
+        </CarouselContent>
+
+        <div className="flex justify-center mt-4">
+          {practiceSheet?.modules.map((_, index) => (
+            <div
+              key={index}
+              className={`w-2 h-2 mx-1 rounded-full ${
+                index + 1 === current ? "bg-purple-500" : "bg-gray-300"
+              }`}
+            ></div>
+          ))}
+        </div>
+      </Carousel>
+      <section className="w-full rounded-4xl p-8 bg-white border flex flex-col justify-between gap-4">
+        <h1 className="text-lg font-satoshi-bold ">
+          This practice sheet will help you prepare for the SAT. Take your time
+          and do your best!
+        </h1>
+      </section>
+      <Button
+        onClick={() => handleStartTest(practiceSheet?.id!)}
+        variant="outline"
+        className="font-satoshi rounded-3xl w-full text-lg py-8 bg-linear-to-br from-purple-500 to-purple-600 text-white active:bg-linear-to-br active:from-purple-600 active:to-purple-700 active:translate-y-1"
+      >
+        Start Test
+      </Button>
+    </main>
+  );
+};

src/pages/student/practice/Results.tsx

@@ -0,0 +1,3 @@
+export const Results = () => {
+  return <div>Results</div>;
+};

src/pages/student/practice/Test.tsx

@@ -0,0 +1,3 @@
+export const Test = () => {
+  return <div>Test</div>;
+};