|
|
|
|
|
import { useEffect, useState } from "react"; |
|
|
import { RiTimerLine } from "react-icons/ri"; |
|
|
import './index.css'; |
|
|
|
|
|
const Header = ({ info, examData }) => { |
|
|
console.log("header render==================="); |
|
|
const [timer, setTimer] = useState(null); |
|
|
useEffect(() => { |
|
|
if (info?.duration === info?.remainingTime) { |
|
|
setTimer(info?.duration); |
|
|
} else { |
|
|
setTimer(info?.remainingTime +1); |
|
|
} |
|
|
}, [info]); |
|
|
return ( |
|
|
<div className="Header w-full h-14 fixed top-2 left-0 px-28 bg-white"> |
|
|
<div className="w-full h-full flex flex-row-reverse items-center justify-between rounded-lg border border-[#ECECEC] px-6"> |
|
|
<div |
|
|
className="text-right text-sm text-right" |
|
|
style={{ width: "calc(100% - 220px)" }} |
|
|
> |
|
|
{info?.name} |
|
|
</div> |
|
|
<div className="w-52 flex items-center gap-x-2"> |
|
|
<div className="w-[30%]"> |
|
|
{timer && <Timer timer={timer} />} |
|
|
</div> |
|
|
<div className="text-sm" style={{ direction: "rtl" }}> |
|
|
زمان باقیمانده : |
|
|
</div> |
|
|
<RiTimerLine className="text-xl text-[#DF1452]" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
export default Header; |
|
|
|
|
|
const Timer = ({ timer }) => { |
|
|
console.log(timer); |
|
|
const [min, setMin] = useState(timer); |
|
|
const [sec, setSec] = useState(0); |
|
|
const [showBtn, setShowbtn] = useState(false); |
|
|
|
|
|
setTimeout(() => { |
|
|
if (sec === 0 && min === 0) { |
|
|
setShowbtn(true); |
|
|
} |
|
|
if (sec === 0 && !showBtn) { |
|
|
setSec(59); |
|
|
setMin(min - 1); |
|
|
} else { |
|
|
setSec(sec - 1); |
|
|
} |
|
|
}, 1000); |
|
|
|
|
|
return ( |
|
|
<> |
|
|
{!showBtn && ( |
|
|
<div className="Code-container-send-code-again h-4/5 flex items-center justify-between"> |
|
|
<div className="w-[48%] text-sm text-center">{min}</div> |
|
|
<div>:</div> |
|
|
<div className="w-[48%] text-sm text-center">{sec}</div> |
|
|
</div> |
|
|
)} |
|
|
{showBtn && ( |
|
|
<div className="Code-container-send-code-again text-sm w-full text-center"> |
|
|
اتمام زمان |
|
|
</div> |
|
|
)} |
|
|
</> |
|
|
); |
|
|
}; |