feat(test): add functionality for drill, hard test module testing

src/pages/student/hard-test-modules/page.tsx

@@ -1,7 +1,119 @@
+import {
+  DecimalsArrowRight,
+  Languages,
+  Percent,
+  Pilcrow,
+  Superscript,
+  WholeWord,
+} from "lucide-react";
+import { Card, CardContent } from "../../../components/ui/card";
+import { useState } from "react";
+import { useAuthStore } from "../../../stores/authStore";
+import { useNavigate } from "react-router-dom";
+import { useExamConfigStore } from "../../../stores/useExamConfigStore";
+
+type Module = "EBRW" | "MATH" | null;
+
 export const HardTestModules = () => {
+  const user = useAuthStore((state) => state.user);
+  const navigate = useNavigate();
+  const [selected, setSelected] = useState<Module>(null);
+
+  const { setMode, storeDuration, setSection } = useExamConfigStore();
+
+  function handleStartModule() {
+    if (!user) return;
+
+    (setMode("MODULE"), storeDuration(7), setSection(selected));
+
+    navigate(`/student/practice/${selected}/test`, { replace: true });
+  }
   return (
     <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
-      HardTestModules
+      <header className="space-y-2">
+        <h1 className="font-satoshi-bold text-3xl">Hard Test Modules</h1>
+        <p className="font-satoshi text-md text-gray-500">
+          Tackle hard practice test modules by selecting a section.
+        </p>
+      </header>
+      <section className="space-y-6">
+        <Card
+          onClick={() =>
+            setSelected((prev) => (prev === "EBRW" ? null : "EBRW"))
+          }
+          className={`relative cursor-pointer overflow-hidden transition
+    ${
+      selected === "EBRW"
+        ? "ring-2 ring-blue-500 scale-[1.02]"
+        : "hover:scale-[1.01]"
+    }
+    bg-linear-to-br from-blue-400 to-blue-600
+  `}
+        >
+          <CardContent className="z-10 flex items-center justify-center py-16 ">
+            <h1 className="font-satoshi-bold text-2xl text-blue-50">
+              Reading & Writing
+            </h1>
+          </CardContent>
+          <Languages
+            size={250}
+            className="absolute -top-5 -right-10 -rotate-23 text-white opacity-30"
+          />
+          <WholeWord
+            size={150}
+            className="absolute -top-10 -left-3 rotate-23 text-white opacity-30"
+          />
+          <Pilcrow
+            size={150}
+            className="absolute -bottom-12 left-8 -rotate-23 text-white opacity-30"
+          />
+        </Card>
+        <Card
+          onClick={() =>
+            setSelected((prev) => (prev === "MATH" ? null : "MATH"))
+          }
+          className={`relative cursor-pointer overflow-hidden transition
+    ${
+      selected === "MATH"
+        ? "ring-2 ring-rose-500 scale-[1.02]"
+        : "hover:scale-[1.01]"
+    }
+    bg-linear-to-br from-rose-400 to-rose-600
+  `}
+        >
+          <CardContent className="z-10 flex items-center justify-center py-16 ">
+            <h1 className="font-satoshi-bold text-2xl text-blue-50">
+              Mathematics
+            </h1>
+          </CardContent>
+          <DecimalsArrowRight
+            size={250}
+            className="absolute -top-5 -right-10 -rotate-23 text-white opacity-30"
+          />
+          <Superscript
+            size={150}
+            className="absolute -top-10 -left-3 rotate-23 text-white opacity-30"
+          />
+          <Percent
+            size={120}
+            className="absolute -bottom-5 left-8 -rotate-10 text-white opacity-30"
+          />
+        </Card>
+      </section>
+      {selected && (
+        <div className=" bottom-6 left-0 right-0 flex justify-center z-50">
+          <button
+            onClick={() => {
+              handleStartModule();
+            }}
+            className="rounded-2xl px-10 py-4 font-satoshi-bold text-lg
+        bg-linear-to-br from-purple-500 to-purple-600 text-white
+        shadow-xl animate-in slide-in-from-bottom-4"
+          >
+            Start Test
+          </button>
+        </div>
+      )}
     </main>
   );
 };