97 lines
4.6 KiB
JavaScript
97 lines
4.6 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { B as Badge } from "./badge-J-zeQvMg.js";
|
|
import { B as Button } from "./button-CdJZJLGw.js";
|
|
import { C as Card, a as CardHeader, c as CardTitle, b as CardContent } from "./card-B-gBwpxd.js";
|
|
import { Check, Flag, Circle } from "lucide-react";
|
|
import "@radix-ui/react-slot";
|
|
import "class-variance-authority";
|
|
import "./utils-DLCPGU0v.js";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
import "react";
|
|
const QuestionNavigator = ({ questions, currentQuestionIndex, answeredQuestions, markedQuestions, onNavigate }) => {
|
|
const getQuestionStatus = (questionId) => {
|
|
if (answeredQuestions.has(questionId)) return "answered";
|
|
if (markedQuestions.has(questionId)) return "marked";
|
|
return "unanswered";
|
|
};
|
|
const getStatusIcon = (questionId) => {
|
|
const status = getQuestionStatus(questionId);
|
|
if (status === "answered") return /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" });
|
|
if (status === "marked") return /* @__PURE__ */ jsx(Flag, { className: "h-3 w-3" });
|
|
return /* @__PURE__ */ jsx(Circle, { className: "h-3 w-3" });
|
|
};
|
|
const getButtonVariant = (index, questionId) => {
|
|
if (index === currentQuestionIndex) return "default";
|
|
const status = getQuestionStatus(questionId);
|
|
if (status === "answered") return "secondary";
|
|
if (status === "marked") return "outline";
|
|
return "ghost";
|
|
};
|
|
return /* @__PURE__ */ jsxs(Card, { children: [
|
|
/* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Question Navigator" }) }),
|
|
/* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "h-6 w-6 p-0", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) }),
|
|
/* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
|
|
"Answered (",
|
|
answeredQuestions.size,
|
|
")"
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(Badge, { variant: "outline", className: "h-6 w-6 p-0", children: /* @__PURE__ */ jsx(Flag, { className: "h-3 w-3" }) }),
|
|
/* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
|
|
"Marked (",
|
|
markedQuestions.size,
|
|
")"
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(Badge, { variant: "ghost", className: "h-6 w-6 p-0", children: /* @__PURE__ */ jsx(Circle, { className: "h-3 w-3" }) }),
|
|
/* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
|
|
"Not Answered (",
|
|
questions.length - answeredQuestions.size,
|
|
")"
|
|
] })
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-2", children: questions.map((question, index) => /* @__PURE__ */ jsxs(
|
|
Button,
|
|
{
|
|
variant: getButtonVariant(index, question.id),
|
|
size: "sm",
|
|
onClick: () => onNavigate(index),
|
|
className: "relative h-10 w-full",
|
|
children: [
|
|
/* @__PURE__ */ jsx("span", { className: "text-sm", children: index + 1 }),
|
|
/* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1", children: getStatusIcon(question.id) })
|
|
]
|
|
},
|
|
question.id
|
|
)) }),
|
|
/* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-gray-50 p-3", children: [
|
|
/* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-gray-700", children: "Progress Summary" }),
|
|
/* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-1 text-sm text-gray-600", children: [
|
|
/* @__PURE__ */ jsxs("p", { children: [
|
|
"Total Questions: ",
|
|
/* @__PURE__ */ jsx("span", { className: "font-semibold", children: questions.length })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("p", { children: [
|
|
"Answered: ",
|
|
/* @__PURE__ */ jsx("span", { className: "font-semibold text-green-600", children: answeredQuestions.size })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("p", { children: [
|
|
"Remaining: ",
|
|
/* @__PURE__ */ jsx("span", { className: "font-semibold text-orange-600", children: questions.length - answeredQuestions.size })
|
|
] })
|
|
] })
|
|
] })
|
|
] })
|
|
] });
|
|
};
|
|
export {
|
|
QuestionNavigator as default
|
|
};
|