38 lines
1.9 KiB
TypeScript
38 lines
1.9 KiB
TypeScript
import Button from "@/components/Low/Button";
|
|
import { Module } from "@/interfaces";
|
|
import { LevelPart, UserSolution } from "@/interfaces/exam";
|
|
import clsx from "clsx";
|
|
import { ReactNode } from "react";
|
|
import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
|
|
|
|
interface Props {
|
|
partIndex: number;
|
|
part: LevelPart // for now
|
|
onNext: () => void;
|
|
}
|
|
|
|
const PartDivider: React.FC<Props> = ({ partIndex, part, onNext }) => {
|
|
|
|
const moduleIcon: { [key in Module]: ReactNode } = {
|
|
reading: <BsBook className="text-ielts-reading w-6 h-6" />,
|
|
listening: <BsHeadphones className="text-ielts-listening w-6 h-6" />,
|
|
writing: <BsPen className="text-ielts-writing w-6 h-6" />,
|
|
speaking: <BsMegaphone className="text-ielts-speaking w-6 h-6" />,
|
|
level: <BsClipboard className="text-white w-6 h-6" />,
|
|
};
|
|
|
|
return (
|
|
<div className={clsx("flex flex-col h-fit border bg-white rounded-3xl p-12 gap-8", part.intro ? "w-3/6" : "items-center my-auto")}>
|
|
{/** only level for now */}
|
|
<div className="flex flex-row gap-4 items-center"><div className="w-12 h-12 bg-ielts-level flex items-center justify-center rounded-lg">{moduleIcon["level"]}</div><p className="text-3xl">{part.intro ? `Part ${partIndex + 1}` : "Placement Test"}</p></div>
|
|
{part.intro && part.intro.split('\\n\\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 color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full text-2xl">
|
|
{partIndex === 0 ? `Start now`: `Start Part ${partIndex + 1}`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PartDivider; |