feat(pages): add pretest screen

This commit is contained in:
shafin-r
2026-01-22 19:15:22 +06:00
parent d5a39add17
commit 61b7c5220e
12 changed files with 572 additions and 25 deletions

View File

@ -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>