81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import { Module } from "@/interfaces";
|
|
import { ExerciseOnlyExam, LevelPart, ListeningPart, PartExam, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
|
|
import useExamStore, { usePersistentExamStore } from "@/stores/exam";
|
|
import { Tab, TabGroup, TabList } from "@headlessui/react";
|
|
import clsx from "clsx";
|
|
import React from "react";
|
|
import hasDivider from "../utils/hasDivider";
|
|
|
|
interface Props {
|
|
module: Module;
|
|
sectionLabel: string;
|
|
seenParts: Set<number>;
|
|
setShowPartDivider: React.Dispatch<React.SetStateAction<boolean>>;
|
|
setSeenParts: React.Dispatch<React.SetStateAction<Set<number>>>;
|
|
preview: boolean;
|
|
setIsBetweenParts?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}
|
|
|
|
const SectionNavbar: React.FC<Props> = ({ module, sectionLabel, seenParts, setSeenParts, setShowPartDivider, setIsBetweenParts, preview }) => {
|
|
|
|
const isPartExam = ["reading", "listening", "level"].includes(module);
|
|
const examState = useExamStore((state) => state);
|
|
const persistentExamState = usePersistentExamStore((state) => state);
|
|
|
|
const {
|
|
exam,
|
|
partIndex, setPartIndex,
|
|
exerciseIndex, setExerciseIndex,
|
|
setQuestionIndex,
|
|
setBgColor
|
|
} = !preview ? examState : persistentExamState;
|
|
|
|
const sections = isPartExam ? (exam as PartExam).parts : (exam as ExerciseOnlyExam).exercises;
|
|
const sectionIndex = isPartExam ? partIndex : exerciseIndex;
|
|
|
|
const handleSectionChange = (index: number) => {
|
|
const changeSection = isPartExam ? setPartIndex : setExerciseIndex;
|
|
changeSection(index);
|
|
}
|
|
|
|
const handleClick = (index: number) => {
|
|
setExerciseIndex(0);
|
|
setQuestionIndex(0);
|
|
if (!seenParts.has(index)) {
|
|
if (hasDivider(exam!, index)) {
|
|
setShowPartDivider(true);
|
|
setBgColor(`bg-ielts-${module}-light`);
|
|
} else if(setIsBetweenParts) {
|
|
setIsBetweenParts(true);
|
|
}
|
|
setSeenParts(prev => new Set(prev).add(index));
|
|
}
|
|
}
|
|
|
|
return (
|
|
|
|
<div className="w-full">
|
|
<TabGroup className="w-[90%]" selectedIndex={sectionIndex} onChange={handleSectionChange}>
|
|
<TabList className={`flex space-x-1 rounded-xl bg-ielts-${module}/20 p-1`}>
|
|
{sections.map((_, index) =>
|
|
<Tab key={index} onClick={() => handleClick(index)}
|
|
className={({ selected }) =>
|
|
clsx(
|
|
`w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-${module}/80`,
|
|
"ring-white ring-opacity-60 focus:outline-none",
|
|
"transition duration-300 ease-in-out hover:bg-white/70",
|
|
selected && "bg-white shadow",
|
|
)
|
|
}
|
|
>{`${sectionLabel} ${index + 1}`}</Tab>
|
|
)
|
|
}
|
|
</TabList>
|
|
</TabGroup>
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
export default SectionNavbar;
|