devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Took care of some warnings

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-08-20 10:07:18 +01:00
parent 75a45108a2
commit 97b533bd3a
5 changed files with 700 additions and 657 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Medium/ModuleTitle.tsx
View File

@@ -1,10 +1,10 @@
import { Module } from "@/interfaces";
import {Module} from "@/interfaces";
import useExamStore from "@/stores/examStore";
import { moduleLabels } from "@/utils/moduleUtils";
import {moduleLabels} from "@/utils/moduleUtils";
import clsx from "clsx";
import { motion } from "framer-motion";
import { ReactNode, useEffect, useState } from "react";
import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsStopwatch } from "react-icons/bs";
import {motion} from "framer-motion";
import {ReactNode, useEffect, useState} from "react";
import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsStopwatch} from "react-icons/bs";
import ProgressBar from "../Low/ProgressBar";
import TimerEndedModal from "../TimerEndedModal";
@@ -18,15 +18,13 @@ interface Props {
partLabel?: string;
}
export default function ModuleTitle({
minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false, partLabel
}: Props) {
export default function ModuleTitle({minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false, partLabel}: Props) {
const [timer, setTimer] = useState(minTimer * 60);
const [showModal, setShowModal] = useState(false);
const [warningMode, setWarningMode] = useState(false);
const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
const { timeSpent } = useExamStore((state) => state);
const {timeSpent} = useExamStore((state) => state);
useEffect(() => setTimer((prev) => prev - timeSpent), [timeSpent]);
@@ -48,7 +46,7 @@ export default function ModuleTitle({
if (timer < 300 && !warningMode) setWarningMode(true);
}, [timer, warningMode]);
const moduleIcon: { [key in Module]: ReactNode } = {
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" />,
@@ -70,9 +68,9 @@ export default function ModuleTitle({
"absolute top-4 right-6 bg-mti-gray-seasalt px-4 py-3 flex items-center gap-2 rounded-full text-mti-gray-davy",
warningMode && !disableTimer && "bg-mti-red-light text-mti-gray-seasalt",
)}
initial={{ scale: warningMode && !disableTimer ? 0.8 : 1 }}
animate={{ scale: warningMode && !disableTimer ? 1.1 : 1 }}
transition={{ repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut" }}>
initial={{scale: warningMode && !disableTimer ? 0.8 : 1}}
animate={{scale: warningMode && !disableTimer ? 1.1 : 1}}
transition={{repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut"}}>
<BsStopwatch className="w-6 h-6" />
<span className="text-base font-semibold w-12">
{timer > 0 && (
@@ -90,11 +88,25 @@ export default function ModuleTitle({
</span>
</motion.div>
<div className="w-full">
{partLabel && <div className="text-3xl space-y-4">{partLabel.split('\n\n').map((line, index) => {
if(index == 0) return <p className="font-bold">{line}</p>
else return <p className="text-2xl font-semibold">{line}</p>
})}</div>}
<div className={clsx("flex gap-6 w-full h-fit items-center", partLabel ? "mt-10" : "mt-5" )}>
{partLabel && (
<div className="text-3xl space-y-4">
{partLabel.split("\n\n").map((line, index) => {
if (index == 0)
return (
<p key={index} className="font-bold">
{line}
</p>
);
else
return (
<p key={index} className="text-2xl font-semibold">
{line}
</p>
);
})}
</div>
)}
<div className={clsx("flex gap-6 w-full h-fit items-center", partLabel ? "mt-10" : "mt-5")}>
<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg">{moduleIcon[module]}</div>
<div className="flex flex-col gap-3 w-full">
<div className="w-full flex justify-between">