65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
import Button from "@/components/Low/Button";
|
|
import { Module } from "@/interfaces";
|
|
import { InteractiveSpeakingExercise, LevelPart, ListeningPart, ReadingPart, SpeakingExercise, UserSolution, WritingExercise } from "@/interfaces/exam";
|
|
import clsx from "clsx";
|
|
import { ReactNode } from "react";
|
|
import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
|
|
|
|
interface Props {
|
|
sectionIndex: number;
|
|
sectionLabel: string;
|
|
defaultTitle: string;
|
|
module: Module;
|
|
section: LevelPart | ReadingPart | ListeningPart | WritingExercise | SpeakingExercise | InteractiveSpeakingExercise;
|
|
onNext: () => void;
|
|
}
|
|
|
|
const PartDivider: React.FC<Props> = ({ sectionIndex, sectionLabel, section, module, defaultTitle, onNext }) => {
|
|
const iconStyle = "text-white w-6 h-6";
|
|
const moduleIcon: { [key in Module]: ReactNode } = {
|
|
reading: <BsBook className={iconStyle} />,
|
|
listening: <BsHeadphones className={iconStyle} />,
|
|
writing: <BsPen className={iconStyle} />,
|
|
speaking: <BsMegaphone className={iconStyle} />,
|
|
level: <BsClipboard className={iconStyle} />,
|
|
};
|
|
|
|
return (
|
|
<div className={clsx("flex flex-col h-fit border bg-white rounded-3xl p-12 gap-8", section.intro ? "w-3/6" : "items-center my-auto")}>
|
|
<div className="flex flex-row gap-4 items-center">
|
|
<div className={`w-12 h-12 bg-ielts-${module} flex items-center justify-center rounded-lg`}>{moduleIcon[module]}</div>
|
|
<p className="text-3xl">{section.intro ? `${sectionLabel} ${sectionIndex + 1}` : defaultTitle}</p>
|
|
</div>
|
|
{section.intro && section.intro
|
|
.replace(/\\n/g, '\n')
|
|
.split('\n')
|
|
.map((x, index) => (
|
|
<p
|
|
key={`line-${index}`}
|
|
className="text-2xl text-clip"
|
|
dangerouslySetInnerHTML={{
|
|
__html: x.replace(
|
|
'that is not correct',
|
|
'that is <span class="font-bold"><u>not correct</u></span>'
|
|
)
|
|
}}
|
|
></p>
|
|
))
|
|
}
|
|
<div className="flex items-center justify-center mt-4">
|
|
<button
|
|
onClick={() => onNext()}
|
|
className={clsx(
|
|
"max-w-[200px] self-end w-full text-2xl text-white",
|
|
"rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer select-none",
|
|
"py-4 px-6",
|
|
`bg-ielts-${module} hover:bg-ielts-${module}/70`
|
|
)}>
|
|
{sectionIndex === 0 ? `Start now` : `Start ${sectionLabel} ${sectionIndex + 1}`}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PartDivider; |