created a Countdown time component

src/App.tsx

@@ -38,6 +38,7 @@ import JoiningLetter from './pages/joiningLetter/JoiningLetter';
 import Celebration from './pages/celebration/Celebration';
 import SignaturePhoto from './pages/joiningLetter/SignaturePhoto';
 import TechinicalInterviewResults from './pages/technicalInterview/TechinicalInterviewResults';
+import CountdownTimer from './components/CountDownTimer/CountdownTimer';
 
 
 
@@ -104,11 +105,10 @@ const App: React.FC = () => (
         <Route exact path="/celebration">
           <Celebration />
         </Route>
-
-
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>
+
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>

src/components/CountDownTimer/CountdownTimer.module.scss

@@ -0,0 +1,18 @@
+.CountdownTimerHolder {
+    .time {
+        font-size: 3.6rem;
+        font-weight: 600;
+        color: #363636;
+        letter-spacing: 0.036rem;
+    }
+    .days {
+        font-size: 1.3rem;
+        color: #9F9F9F;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        // width: 95%;
+        margin: 0 auto;
+        text-align: center;
+    }
+}

src/components/CountDownTimer/CountdownTimer.tsx

@@ -0,0 +1,32 @@
+import styles from "./CountdownTimer.module.scss";
+
+interface OwnProp {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+
+const CountdownTimer: React.FC<OwnProp> = (props) => {
+
+    return (
+        <div className={styles.CountdownTimerHolder}>
+            <h4 className={styles.time}>
+                {
+                    `${props.days < 10 ? "0" : ""}${props.days} : 
+                    ${props.hours < 10 ? "0" : ""}${props.hours} : 
+                    ${props.minutes < 10 ? "0" : ""}${props.minutes} : 
+                    ${props.seconds < 10 ? "0" : ""}${props.seconds}`
+                }
+            </h4>
+            <div className={styles.days}>
+                <div>Days</div>
+                <div>Hrs</div>
+                <div>Mins</div>
+                <div>Secs</div>
+            </div>
+        </div>
+    );
+}
+
+export default CountdownTimer;

src/components/CountDownTimer/useCountdown.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+const useCountdown = (targetDate: Date) => {
+
+    const countDownDate = new Date(targetDate).getTime();
+
+    const [countDown, setCountDown] = useState(
+        countDownDate - new Date().getTime()
+    );
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCountDown(countDownDate - new Date().getTime());
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
+
+    return [days, hours, minutes, seconds];
+};
+
+export { useCountdown };

src/components/timeSlot/TimeSlot.tsx

@@ -3,7 +3,7 @@ import styles from "./TimeSlot.module.scss";
 import { chevronBack, key } from 'ionicons/icons'
 import { Link } from "react-router-dom";
 import { useState } from "react";
-import { addDays } from "date-fns";
+import { addDays, format } from "date-fns";
 
 // singular
 interface dates {
@@ -24,18 +24,10 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
     const [highlightedDate, setHighlightedDate] = useState<dates>();
     const [highlightedTime, setHighlightedTime] = useState<string>("");
 
-    // use object insted of map
-    const daysMap = new Map([[0, "Sun"], [1, "Mon"], [2, "Tue"], [3, "Wed"], [4, "Thu"], [5, "Fri"], [6, "Sat"]]);
-
     const dates = props.dates.map((date, key) => {
         const currentDate = new Date();
         let day = addDays(currentDate, key + 1);
-        // if (daysMap.get(day) === "Thu") {  // sat
-        //     day = addDays(currentDate, key + 3).getDay();
-        // } else if (daysMap.get(day) === "Fri") {
-        //     day = addDays(currentDate, key + 3).getDay();
-        // }
-        console.log(highlightedDate);
+
         return (
             <div
                 className={styles.date + " " + (date === highlightedDate ? styles.active : "")}
@@ -43,10 +35,10 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
                 onClick={() => setHighlightedDate(date)}>
 
                 <div className={styles.day}>
-                    {daysMap.get(day.getDay())}
+                    {format(day, 'eee')}
                 </div>
                 <div>
-                    {day.getDate()}
+                    {format(day, 'e')}
                 </div>
 
             </div>

src/pages/preliminaryRound/PreliminaryRound.tsx

@@ -39,7 +39,7 @@ const PreliminaryRound: React.FC = () => {
                         </div>
                     </div>
 
-                    <Link to="./quiz">
+                    <Link to="/quiz">
                         <IonButton shape="round" expand='block'>Start quiz</IonButton>
                     </Link>
 

src/pages/technicalInterview/TechnicalInterview.module.scss

@@ -46,22 +46,22 @@
                 letter-spacing: 0.024rem;
             }
             .timeLeft {
-                .time {
-                    font-size: 3.6rem;
-                    font-weight: 600;
-                    color: #363636;
-                    letter-spacing: 0.036rem;
-                }
-                .days {
-                    font-size: 1.3rem;
-                    color: #9F9F9F;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    width: 95%;
-                    margin: 0 auto;
-                    text-align: center;
-                }
+                // .time {
+                //     font-size: 3.6rem;
+                //     font-weight: 600;
+                //     color: #363636;
+                //     letter-spacing: 0.036rem;
+                // }
+                // .days {
+                //     font-size: 1.3rem;
+                //     color: #9F9F9F;
+                //     display: flex;
+                //     justify-content: space-between;
+                //     align-items: center;
+                //     width: 95%;
+                //     margin: 0 auto;
+                //     text-align: center;
+                // }
             }
             .icon {
                 width: 6rem;

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -5,8 +5,11 @@ import StepHeader from "../../components/stepsHeader/StepHeader";
 import techinicalInterview from "../../assets/icons/Technical_Interview.svg";
 import linkIcon from "../../assets/icons/link.svg";
 import { Link } from "react-router-dom";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import TimeSlot from "../../components/timeSlot/TimeSlot";
+import { useCountdown } from "../../components/CountDownTimer/useCountdown";
+import { addDays, min } from "date-fns";
+import CountdownTimer from "../../components/CountDownTimer/CountdownTimer";
 
 interface dates {
     date: string;
@@ -18,6 +21,14 @@ const TechnicalInterview: React.FC = () => {
     const [isDateSet, setDate] = useState<boolean>(false);
     const [isTimeSlot, setTimeSlot] = useState<boolean>(false);
 
+    const [days, hours, minutes, seconds] = useCountdown(addDays(new Date(), 2));
+
+    console.log(days, hours, minutes, seconds);
+
+    // useEffect(() => {
+    //     console.log("render");
+    // }, [seconds]);
+
     const timeSlots = ["11:00 AM - 1:00 pm", "1:00 PM - 3:00 pm", "3:00 PM - 5:00 pm"];
 
     const dates: dates[] = [
@@ -40,7 +51,6 @@ const TechnicalInterview: React.FC = () => {
     ];
 
     const getDate = (date: string) => {
-        console.log(date);
         setTimeSlot(false);
         setDate(true);
     }
@@ -64,13 +74,18 @@ const TechnicalInterview: React.FC = () => {
 
                                 <h4>Let's Meet in:</h4>
                                 <div className={styles.timeLeft}>
-                                    <h4 className={styles.time}>02 : 04 : 25 : 53</h4>
-                                    <div className={styles.days}>
+                                    {/* <h4 className={styles.time}>{`${days} : ${hours} : ${minutes} : ${seconds}`}</h4> */}
+                                    <CountdownTimer
+                                        days={days}
+                                        hours={hours}
+                                        minutes={minutes}
+                                        seconds={seconds} />
+                                    {/* <div className={styles.days}>
                                         <div>Days</div>
                                         <div>Hrs</div>
                                         <div>Mins</div>
                                         <div>Secs</div>
-                                    </div>
+                                    </div> */}
                                 </div>
                                 <h4>Join us on Google Meet</h4>
                                 <div className={styles.icon}>
@@ -98,7 +113,7 @@ const TechnicalInterview: React.FC = () => {
                 {
                     isTimeSlot &&
                     <TimeSlot
-                        month="April -May"
+                        month="April-May"
                         dates={dates}
                         timeSlots={timeSlots}
                         getDate={getDate} />