120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
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">
|
|
<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>
|
|
);
|
|
};
|