feat(pages): add pretest screen
This commit is contained in:
shafin-r
@ -18,6 +18,7 @@
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"lucide-react": "^0.562.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
|
||||
28
pnpm-lock.yaml
generated
28
pnpm-lock.yaml
generated
@ -32,6 +32,9 @@ importers:
|
||||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
embla-carousel-react:
|
||||
specifier: ^8.6.0
|
||||
version: 8.6.0(react@19.2.3)
|
||||
lucide-react:
|
||||
specifier: ^0.562.0
|
||||
version: 0.562.0(react@19.2.3)
|
||||
@ -1181,6 +1184,19 @@ packages:
|
||||
electron-to-chromium@1.5.267:
|
||||
resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
|
||||
|
||||
embla-carousel-react@8.6.0:
|
||||
resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
|
||||
embla-carousel-reactive-utils@8.6.0:
|
||||
resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
|
||||
peerDependencies:
|
||||
embla-carousel: 8.6.0
|
||||
|
||||
embla-carousel@8.6.0:
|
||||
resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
|
||||
|
||||
enhanced-resolve@5.18.4:
|
||||
resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
|
||||
engines: {node: '>=10.13.0'}
|
||||
@ -2771,6 +2787,18 @@ snapshots:
|
||||
|
||||
electron-to-chromium@1.5.267: {}
|
||||
|
||||
embla-carousel-react@8.6.0(react@19.2.3):
|
||||
dependencies:
|
||||
embla-carousel: 8.6.0
|
||||
embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
|
||||
react: 19.2.3
|
||||
|
||||
embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
|
||||
dependencies:
|
||||
embla-carousel: 8.6.0
|
||||
|
||||
embla-carousel@8.6.0: {}
|
||||
|
||||
enhanced-resolve@5.18.4:
|
||||
dependencies:
|
||||
graceful-fs: 4.2.11
|
||||
|
||||
23
src/App.tsx
23
src/App.tsx
@ -5,12 +5,15 @@ import {
|
||||
} from "react-router-dom";
|
||||
import { Login } from "./pages/auth/Login";
|
||||
import { Home } from "./pages/student/Home";
|
||||
import { Drills } from "./pages/student/Drills";
|
||||
import { Practice } from "./pages/student/Practice";
|
||||
import { Rewards } from "./pages/student/Rewards";
|
||||
import { Profile } from "./pages/student/Profile";
|
||||
import { Lessons } from "./pages/student/Lessons";
|
||||
import { ProtectedRoute } from "./components/ProtectedRoute";
|
||||
import { StudentLayout } from "./pages/student/StudentLayout";
|
||||
import { Test } from "./pages/student/practice/Test";
|
||||
import { Results } from "./pages/student/practice/Results";
|
||||
import { Pretest } from "./pages/student/practice/Pretest";
|
||||
|
||||
function App() {
|
||||
const router = createBrowserRouter([
|
||||
@ -30,8 +33,8 @@ function App() {
|
||||
element: <Home />,
|
||||
},
|
||||
{
|
||||
path: "drills",
|
||||
element: <Drills />,
|
||||
path: "practice",
|
||||
element: <Practice />,
|
||||
},
|
||||
{
|
||||
path: "lessons",
|
||||
@ -45,6 +48,20 @@ function App() {
|
||||
path: "profile",
|
||||
element: <Profile />,
|
||||
},
|
||||
{
|
||||
path: "practice/:sheetId",
|
||||
element: <Pretest />,
|
||||
children: [
|
||||
{
|
||||
path: "test",
|
||||
element: <Test />,
|
||||
},
|
||||
{
|
||||
path: "results",
|
||||
element: <Results />,
|
||||
},
|
||||
],
|
||||
},
|
||||
// more student subroutes here
|
||||
],
|
||||
},
|
||||
|
||||
239
src/components/ui/carousel.tsx
Normal file
239
src/components/ui/carousel.tsx
Normal file
@ -0,0 +1,239 @@
|
||||
import * as React from "react"
|
||||
import useEmblaCarousel, {
|
||||
type UseEmblaCarouselType,
|
||||
} from "embla-carousel-react"
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
type CarouselApi = UseEmblaCarouselType[1]
|
||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||
type CarouselOptions = UseCarouselParameters[0]
|
||||
type CarouselPlugin = UseCarouselParameters[1]
|
||||
|
||||
type CarouselProps = {
|
||||
opts?: CarouselOptions
|
||||
plugins?: CarouselPlugin
|
||||
orientation?: "horizontal" | "vertical"
|
||||
setApi?: (api: CarouselApi) => void
|
||||
}
|
||||
|
||||
type CarouselContextProps = {
|
||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||
scrollPrev: () => void
|
||||
scrollNext: () => void
|
||||
canScrollPrev: boolean
|
||||
canScrollNext: boolean
|
||||
} & CarouselProps
|
||||
|
||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function Carousel({
|
||||
orientation = "horizontal",
|
||||
opts,
|
||||
setApi,
|
||||
plugins,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & CarouselProps) {
|
||||
const [carouselRef, api] = useEmblaCarousel(
|
||||
{
|
||||
...opts,
|
||||
axis: orientation === "horizontal" ? "x" : "y",
|
||||
},
|
||||
plugins
|
||||
)
|
||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||
|
||||
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||
if (!api) return
|
||||
setCanScrollPrev(api.canScrollPrev())
|
||||
setCanScrollNext(api.canScrollNext())
|
||||
}, [])
|
||||
|
||||
const scrollPrev = React.useCallback(() => {
|
||||
api?.scrollPrev()
|
||||
}, [api])
|
||||
|
||||
const scrollNext = React.useCallback(() => {
|
||||
api?.scrollNext()
|
||||
}, [api])
|
||||
|
||||
const handleKeyDown = React.useCallback(
|
||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault()
|
||||
scrollPrev()
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault()
|
||||
scrollNext()
|
||||
}
|
||||
},
|
||||
[scrollPrev, scrollNext]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api || !setApi) return
|
||||
setApi(api)
|
||||
}, [api, setApi])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) return
|
||||
onSelect(api)
|
||||
api.on("reInit", onSelect)
|
||||
api.on("select", onSelect)
|
||||
|
||||
return () => {
|
||||
api?.off("select", onSelect)
|
||||
}
|
||||
}, [api, onSelect])
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider
|
||||
value={{
|
||||
carouselRef,
|
||||
api: api,
|
||||
opts,
|
||||
orientation:
|
||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={cn("relative", className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
data-slot="carousel"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={carouselRef}
|
||||
className="overflow-hidden"
|
||||
data-slot="carousel-content"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex",
|
||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const { orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
data-slot="carousel-item"
|
||||
className={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselPrevious({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-previous"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute size-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "top-1/2 -left-12 -translate-y-1/2"
|
||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollPrev}
|
||||
onClick={scrollPrev}
|
||||
{...props}
|
||||
>
|
||||
<ArrowLeft />
|
||||
<span className="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselNext({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-next"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute size-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "top-1/2 -right-12 -translate-y-1/2"
|
||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollNext}
|
||||
onClick={scrollNext}
|
||||
{...props}
|
||||
>
|
||||
<ArrowRight />
|
||||
<span className="sr-only">Next slide</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
type CarouselApi,
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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" />
|
||||
@ -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" },
|
||||
|
||||
199
src/pages/student/practice/Pretest.tsx
Normal file
199
src/pages/student/practice/Pretest.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
3
src/pages/student/practice/Results.tsx
Normal file
3
src/pages/student/practice/Results.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export const Results = () => {
|
||||
return <div>Results</div>;
|
||||
};
|
||||
3
src/pages/student/practice/Test.tsx
Normal file
3
src/pages/student/practice/Test.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export const Test = () => {
|
||||
return <div>Test</div>;
|
||||
};
|
||||
@ -4,6 +4,49 @@ interface CreatedBy {
|
||||
email: string;
|
||||
}
|
||||
|
||||
export interface Subject {
|
||||
name: string;
|
||||
section: string;
|
||||
parent_id: string;
|
||||
id: string;
|
||||
slug: string;
|
||||
parent_name: string;
|
||||
}
|
||||
|
||||
export interface Question {
|
||||
text: string;
|
||||
context: string;
|
||||
context_image_url: string;
|
||||
type: string;
|
||||
section: string;
|
||||
image_url: string;
|
||||
index: number;
|
||||
id: string;
|
||||
options: any[];
|
||||
topics: Topic[];
|
||||
correct_answer: string;
|
||||
explanation: string;
|
||||
}
|
||||
|
||||
export interface Topic {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Module {
|
||||
title: string;
|
||||
duration: number;
|
||||
section: string;
|
||||
difficulty: string;
|
||||
description: string;
|
||||
sequence_order: number;
|
||||
id: string;
|
||||
practice_sheet_id: string;
|
||||
subject: Subject;
|
||||
questions: Question[];
|
||||
questions_count: number;
|
||||
}
|
||||
|
||||
export interface PracticeSheet {
|
||||
title: string;
|
||||
difficulty: string;
|
||||
@ -15,9 +58,9 @@ export interface PracticeSheet {
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
questions_count: number;
|
||||
topics: string[];
|
||||
topics: Topic[];
|
||||
created_by: CreatedBy;
|
||||
modules: string[];
|
||||
modules: Module[];
|
||||
user_status: string;
|
||||
modules_count: number;
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import type { PracticeSheet } from "../types/sheet";
|
||||
|
||||
const API_URL = "https://ed-dev-api.omukk.dev";
|
||||
|
||||
export interface LoginRequest {
|
||||
@ -36,7 +38,7 @@ class ApiClient {
|
||||
|
||||
private async request<T>(
|
||||
endpoint: string,
|
||||
options: RequestInit = {}
|
||||
options: RequestInit = {},
|
||||
): Promise<T> {
|
||||
const url = `${this.baseURL}${endpoint}`;
|
||||
|
||||
@ -79,7 +81,7 @@ class ApiClient {
|
||||
async authenticatedRequest<T>(
|
||||
endpoint: string,
|
||||
token: string,
|
||||
options: RequestInit = {}
|
||||
options: RequestInit = {},
|
||||
): Promise<T> {
|
||||
return this.request<T>(endpoint, {
|
||||
...options,
|
||||
@ -98,7 +100,7 @@ class ApiClient {
|
||||
async getPracticeSheets(
|
||||
token: string,
|
||||
page: number,
|
||||
limit: number
|
||||
limit: number,
|
||||
): Promise<any> {
|
||||
const queryParams = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
@ -106,12 +108,18 @@ class ApiClient {
|
||||
}).toString();
|
||||
return this.authenticatedRequest<any>(
|
||||
`/practice-sheets/?${queryParams}`,
|
||||
token
|
||||
token,
|
||||
);
|
||||
}
|
||||
|
||||
async getSatDates(token: string): Promise<any> {
|
||||
return this.authenticatedRequest<any>(`/sat-dates/`, token);
|
||||
async getPracticeSheetById(
|
||||
token: string,
|
||||
sheetId: string,
|
||||
): Promise<PracticeSheet> {
|
||||
return this.authenticatedRequest<PracticeSheet>(
|
||||
`/practice-sheets/${sheetId}`,
|
||||
token,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user