feat(targeted): add targeted practice functionality
feat(analytics); add analytics page
This commit is contained in:
@ -6,7 +6,14 @@ import {
|
||||
TabsContent,
|
||||
} from "../../components/ui/tabs";
|
||||
import { useAuthStore } from "../../stores/authStore";
|
||||
import { CheckCircle, Search } from "lucide-react";
|
||||
import {
|
||||
CheckCircle,
|
||||
DecimalsArrowRight,
|
||||
DraftingCompass,
|
||||
List,
|
||||
Search,
|
||||
SquarePen,
|
||||
} from "lucide-react";
|
||||
import { api } from "../../utils/api";
|
||||
import {
|
||||
Card,
|
||||
@ -21,6 +28,8 @@ import { Button } from "../../components/ui/button";
|
||||
import type { PracticeSheet } from "../../types/sheet";
|
||||
import { formatStatus } from "../../lib/utils";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Progress } from "../../components/ui/progress";
|
||||
import { Field, FieldLabel } from "../../components/ui/field";
|
||||
|
||||
export const Home = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
@ -78,15 +87,68 @@ export const Home = () => {
|
||||
fetchPracticeSheets();
|
||||
}, [user]);
|
||||
|
||||
const handleStartPractice = (sheetId: string) => {
|
||||
const handleStartPracticeSheet = (sheetId: string) => {
|
||||
navigate(`/student/practice/${sheetId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gray-50 flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-12">
|
||||
<main className="min-h-screen bg-gray-50 space-y-6 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-12">
|
||||
<h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
|
||||
Welcome, {user?.name || "Student"}
|
||||
</h1>
|
||||
|
||||
{/* <section className="border rounded-3xl p-5 space-y-4">
|
||||
<p className="font-satoshi">
|
||||
Your predictive SAT score is low. Take a practice test to increase
|
||||
your scores now!
|
||||
</p>
|
||||
</section> */}
|
||||
<Card
|
||||
className="relative bg-linear-to-br from-red-600 to-red-700 rounded-4xl
|
||||
flex-row"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<CardHeader className="w-[200%] md:w-full">
|
||||
<CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
|
||||
Your score is low!
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="md:w-full space-y-4">
|
||||
<Field className="w-full max-w-sm">
|
||||
<FieldLabel htmlFor="progress-upload">
|
||||
<span className="font-satoshi text-white">Score</span>
|
||||
<span className="ml-auto font-satoshi text-white">
|
||||
854/1600
|
||||
</span>
|
||||
</FieldLabel>
|
||||
<Progress value={55} id="progress-upload" max={100} />
|
||||
</Field>
|
||||
<p className="font-satoshi text-white">
|
||||
Taking more practice tests can increase your score today!
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between">
|
||||
<Button
|
||||
onClick={() => navigate("/student/analytics")}
|
||||
className="bg-transparent border-2 py-3 px-5 text-md font-satoshi rounded-full"
|
||||
>
|
||||
<List />
|
||||
View
|
||||
</Button>
|
||||
<Button className="bg-gray-50 py-3 px-5 text-md font-satoshi text-black rounded-full">
|
||||
<SquarePen />
|
||||
Take a practice test
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</div>
|
||||
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-2 -right-30 ">
|
||||
<DecimalsArrowRight size={380} color="white" />
|
||||
</div>
|
||||
</Card>
|
||||
<h1 className="font-satoshi-bold text-2xl tracking-tight">
|
||||
What are you looking for?
|
||||
</h1>
|
||||
<section className="relative w-full">
|
||||
<input
|
||||
type="text"
|
||||
@ -133,7 +195,7 @@ export const Home = () => {
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
onClick={() => handleStartPractice(sheet?.id)}
|
||||
onClick={() => handleStartPracticeSheet(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"
|
||||
>
|
||||
@ -203,7 +265,7 @@ export const Home = () => {
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
onClick={() => handleStartPractice(sheet?.id)}
|
||||
onClick={() => handleStartPracticeSheet(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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user