feat(test): add dropwdown menu for test screen
This commit is contained in:
shafin-r
@ -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
38
pnpm-lock.yaml
generated
@ -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
156
src/components/ui/dialog.tsx
Normal 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,
|
||||
}
|
||||
@ -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" />
|
||||
|
||||
@ -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,62 +402,118 @@ export const Test = () => {
|
||||
Back
|
||||
</button>
|
||||
|
||||
{/* <button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
|
||||
Menu
|
||||
</button> */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
|
||||
Menu
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<button
|
||||
onClick={() => setShowNavigator(true)}
|
||||
className="px-8 border rounded-full py-3 font-satoshi-medium text-black"
|
||||
>
|
||||
Go to
|
||||
</button>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
className="font-satoshi text-md"
|
||||
onClick={() => setShowNavigator(true)}
|
||||
>
|
||||
Go to
|
||||
</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
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
Quit Test
|
||||
</DropdownMenuItem>
|
||||
</DialogTrigger>
|
||||
|
||||
<div className="grid grid-cols-6 gap-3 overflow-y-auto">
|
||||
{currentModule?.questions.map((q, idx) => {
|
||||
const isCurrent = idx === questionIndex;
|
||||
const isAnswered = !!answers[q.id];
|
||||
<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>
|
||||
|
||||
return (
|
||||
<button
|
||||
key={q.id}
|
||||
onClick={() => {
|
||||
goToQuestion(idx);
|
||||
setShowNavigator(false);
|
||||
}}
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center font-satoshi-medium border transition
|
||||
${
|
||||
isCurrent
|
||||
? "bg-purple-600 text-white border-purple-600"
|
||||
: isAnswered
|
||||
? "bg-green-100 border-green-400 text-green-700"
|
||||
: "bg-white border-gray-300 hover:bg-gray-100"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{idx + 1}
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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];
|
||||
|
||||
return (
|
||||
<button
|
||||
key={q.id}
|
||||
onClick={() => {
|
||||
goToQuestion(idx);
|
||||
setShowNavigator(false);
|
||||
}}
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center font-satoshi-medium border transition
|
||||
${
|
||||
isCurrent
|
||||
? "bg-purple-600 text-white border-purple-600"
|
||||
: isAnswered
|
||||
? "bg-green-100 border-green-400 text-green-700"
|
||||
: "bg-white border-gray-300 hover:bg-gray-100"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{idx + 1}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user