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> )} </> ); };