shafin808s/edbridge-scholars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(test): add dropwdown menu for test screen

Browse Source
This commit is contained in:
shafin-r
2026-01-29 19:03:39 +06:00
parent 57f27ed399
commit b24cb27e93
5 changed files with 326 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -11,6 +11,7 @@
},
"dependencies": {
"@radix-ui/react-avatar": "^1.1.11",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.13",

38
pnpm-lock.yaml generated
View File

@ -11,6 +11,9 @@ importers:
'@radix-ui/react-avatar':
specifier: ^1.1.11
version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@radix-ui/react-dialog':
specifier: ^1.1.15
version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@radix-ui/react-dropdown-menu':
specifier: ^2.1.16
version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@ -498,6 +501,19 @@ packages:
'@types/react':
optional: true
'@radix-ui/react-dialog@1.1.15':
resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-direction@1.1.1':
resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
peerDependencies:
@ -2193,6 +2209,28 @@ snapshots:
optionalDependencies:
'@types/react': 19.2.7
'@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
dependencies:
'@radix-ui/primitive': 1.1.3
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
'@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
'@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
'@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
'@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
aria-hidden: 1.2.6
react: 19.2.3
react-dom: 19.2.3(react@19.2.3)
react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
optionalDependencies:
'@types/react': 19.2.7
'@types/react-dom': 19.2.3(@types/react@19.2.7)
'@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.3)':
dependencies:
react: 19.2.3

156
src/components/ui/dialog.tsx Normal file
View File

@ -0,0 +1,156 @@
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
}
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}
function DialogOverlay({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
return (
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props}
/>
)
}
function DialogContent({
className,
children,
showCloseButton = true,
...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
showCloseButton?: boolean
}) {
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay />
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
className
)}
{...props}
>
{children}
{showCloseButton && (
<DialogPrimitive.Close
data-slot="dialog-close"
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
>
<XIcon />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</DialogPortal>
)
}
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
)
}
function DialogFooter({
className,
showCloseButton = false,
children,
...props
}: React.ComponentProps<"div"> & {
showCloseButton?: boolean
}) {
return (
<div
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
)}
{...props}
>
{children}
{showCloseButton && (
<DialogPrimitive.Close asChild>
<Button variant="outline">Close</Button>
</DialogPrimitive.Close>
)}
</div>
)
}
function DialogTitle({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn("text-lg leading-none font-semibold", className)}
{...props}
/>
)
}
function DialogDescription({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
export {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
}

4
src/pages/student/Home.tsx
View File

@ -83,7 +83,7 @@ export const Home = () => {
};
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-8">
<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">
<h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
Welcome, {user?.name || "Student"}
</h1>
@ -91,7 +91,7 @@ export const Home = () => {
<input
type="text"
placeholder="Search..."
className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
/>
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<Search size={22} color="gray" />

134
src/pages/student/practice/Test.tsx
View File

@ -3,17 +3,11 @@ import { useNavigate, useParams } from "react-router-dom";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "../../../components/ui/card";
import {
Clock,
Layers,
CircleQuestionMark,
Check,
Loader2,
} from "lucide-react";
import { Check, Loader2 } from "lucide-react";
import { api } from "../../../utils/api";
import { useAuthStore } from "../../../stores/authStore";
import type { PracticeSheet, Question } from "../../../types/sheet";
@ -26,6 +20,23 @@ import type {
} from "../../../types/session";
import { useAuthToken } from "../../../hooks/useAuthToken";
import { renderQuestionText } from "../../../components/RenderQuestionText";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../../../components/ui/dropdown-menu";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../../components/ui/dialog";
export const Test = () => {
const navigate = useNavigate();
@ -34,7 +45,6 @@ export const Test = () => {
const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
null,
);
// const [answer, setAnswer] = useState<string>("");
const [answers, setAnswers] = useState<Record<string, string>>({});
const [showNavigator, setShowNavigator] = useState<boolean>(false);
@ -44,7 +54,6 @@ export const Test = () => {
const time = useSatTimer();
const phase = useSatExam((s) => s.phase);
// const moduleIndex = useSatExam((s) => s.moduleIndex);
const currentModule = useSatExam((s) => s.currentModuleQuestions);
const questionIndex = useSatExam((s) => s.questionIndex);
@ -171,6 +180,11 @@ export const Test = () => {
}
};
const handleQuitExam = () => {
finishExam();
navigate("/student/home");
};
useEffect(() => {
resetExam(); // ✅ important
}, [sheetId]);
@ -191,9 +205,6 @@ export const Test = () => {
if (!user) return;
}, [sheetId]);
// const isLastQuestion =
// questionIndex === (currentModule?.questions.length ?? 0) - 1;
const isFirstQuestion = questionIndex === 0;
const renderAnswerInput = (question?: Question) => {
@ -391,33 +402,90 @@ export const Test = () => {
Back
</button>
{/* <button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
Menu
</button> */}
</button>
</DropdownMenuTrigger>
<button
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem
className="font-satoshi text-md"
onClick={() => setShowNavigator(true)}
className="px-8 border rounded-full py-3 font-satoshi-medium text-black"
>
Go to
</button>
</DropdownMenuItem>
</DropdownMenuGroup>
{showNavigator && (
<div className="fixed inset-0 bg-black/40 flex justify-center items-center z-50">
<div className="bg-white rounded-2xl w-[500px] max-h-[70vh] p-6 flex flex-col gap-4 shadow-xl">
<div className="flex justify-between items-center">
<h2 className="text-xl font-satoshi-bold">
Jump to Question
</h2>
<button
onClick={() => setShowNavigator(false)}
className="text-gray-500 hover:text-black"
<DropdownMenuSeparator />
{/* ✅ Dialog MUST wrap DropdownMenuItem */}
<Dialog>
<DialogTrigger asChild>
<DropdownMenuItem
className="font-satoshi text-md text-red-600 focus:text-red-600"
onSelect={(e) => e.preventDefault()} // 🔥 important
>
✕
Quit Test
</DropdownMenuItem>
</DialogTrigger>
<DialogContent showCloseButton={false}>
<DialogHeader>
<DialogTitle className="font-satoshi-medium text-start">
Want to quit the test?
</DialogTitle>
<DialogDescription className="font-satoshi tracking-wide">
Your progress will be saved and you can resume later.
</DialogDescription>
</DialogHeader>
<div className="flex justify-end gap-3 mt-4">
<DialogClose asChild>
<button className="px-4 py-2 border rounded-lg cursor-pointer font-satoshi">
Cancel
</button>
</DialogClose>
<button
onClick={handleQuitExam}
className="px-4 py-2 bg-red-600 text-white rounded-lg cursor-pointer font-satoshi"
>
Quit
</button>
</div>
</DialogContent>
</Dialog>
</DropdownMenuContent>
</DropdownMenu>
<div className="grid grid-cols-6 gap-3 overflow-y-auto">
<Dialog open={showNavigator} onOpenChange={setShowNavigator}>
<DialogContent className="max-w-90 max-h-[75vh] flex flex-col gap-4">
<DialogHeader>
<DialogTitle className="font-satoshi-bold text-xl">
Go to Question
</DialogTitle>
<DialogDescription className="font-satoshi text-md">
<span>Select a question to navigate directly.</span>
<div className="flex items-center gap-6 mt-2">
<div className="flex items-center gap-2">
<div className="h-4 w-4 rounded-sm bg-green-100 border border-green-400"></div>
<span>Answered</span>
</div>
<div className="flex items-center gap-2">
<div className="h-4 w-4 rounded-sm bg-purple-100 border border-purple-400"></div>
<span>Current</span>
</div>
<div className="flex items-center gap-2">
<div className="h-4 w-4 rounded-sm bg-gray-100 border border-gray-400"></div>
<span>Skipped</span>
</div>
</div>
</DialogDescription>
</DialogHeader>
<div className="grid grid-cols-4 gap-3 overflow-y-auto ">
{currentModule?.questions.map((q, idx) => {
const isCurrent = idx === questionIndex;
const isAnswered = !!answers[q.id];
@ -444,9 +512,8 @@ export const Test = () => {
);
})}
</div>
</div>
</div>
)}
</DialogContent>
</Dialog>
<button
disabled={isSubmitting}
@ -476,7 +543,6 @@ export const Test = () => {
</button>
</div>
);
case "FINISHED":
return (
<div className="min-h-screen flex flex-col justify-center items-center text-4xl gap-4">