partialy completed techinical interview

src/App.tsx

@@ -53,9 +53,6 @@ const App: React.FC = () => (
         <Route exact path="/technicalInterview">
           <TechnicalInterview />
         </Route>
-        <Route exact path="/timeSlot">
-          <TimeSlot />
-        </Route>
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

src/assets/icons/link.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.69" height="19.69" viewBox="0 0 19.69 19.69">
+  <path id="link" d="M17.719,14.824a1.117,1.117,0,0,0-.338-.82l-2.509-2.509a1.117,1.117,0,0,0-.82-.338,1.149,1.149,0,0,0-.869.386l.229.223q.193.187.259.259t.181.229a.958.958,0,0,1,.157.308,1.256,1.256,0,0,1,.042.332,1.154,1.154,0,0,1-1.158,1.158,1.222,1.222,0,0,1-.332-.042.982.982,0,0,1-.308-.157,2.64,2.64,0,0,1-.229-.181q-.072-.067-.259-.259l-.223-.229a1.171,1.171,0,0,0-.4.881,1.117,1.117,0,0,0,.338.82l2.486,2.5a1.112,1.112,0,0,0,.82.326,1.162,1.162,0,0,0,.82-.314l1.773-1.762a1.1,1.1,0,0,0,.338-.809ZM9.238,6.318A1.117,1.117,0,0,0,8.9,5.5L6.415,3a1.117,1.117,0,0,0-.82-.338,1.165,1.165,0,0,0-.82.326L3,4.75a1.1,1.1,0,0,0-.338.809A1.117,1.117,0,0,0,3,6.379L5.51,8.888a1.112,1.112,0,0,0,.82.326A1.166,1.166,0,0,0,7.2,8.84L6.97,8.617q-.193-.187-.26-.259a2.763,2.763,0,0,1-.181-.229.974.974,0,0,1-.157-.308,1.212,1.212,0,0,1-.042-.332A1.154,1.154,0,0,1,7.489,6.33a1.222,1.222,0,0,1,.332.042.981.981,0,0,1,.308.157,2.64,2.64,0,0,1,.229.181q.072.067.259.259L8.84,7.2a1.171,1.171,0,0,0,.4-.881Zm10.8,8.505a3.292,3.292,0,0,1-1.026,2.449l-1.773,1.762a3.48,3.48,0,0,1-4.91-.024l-2.486-2.5a3.331,3.331,0,0,1-1-2.449A3.394,3.394,0,0,1,9.9,11.542L8.84,10.48A3.38,3.38,0,0,1,6.33,11.542a3.35,3.35,0,0,1-2.461-1.013L1.359,8.019A3.35,3.35,0,0,1,.346,5.558,3.292,3.292,0,0,1,1.372,3.109L3.145,1.348a3.331,3.331,0,0,1,2.449-1A3.3,3.3,0,0,1,8.055,1.372l2.486,2.5a3.331,3.331,0,0,1,1,2.449A3.394,3.394,0,0,1,10.48,8.84L11.542,9.9a3.5,3.5,0,0,1,4.97-.049l2.509,2.509a3.35,3.35,0,0,1,1.013,2.461Z" transform="translate(-0.346 -0.346)" fill="#fff"/>
+</svg>

src/components/timeSlot/TimeSlot.module.scss

@@ -78,12 +78,30 @@
     text-decoration: none;
 
     ion-button {
-        margin-top: 28vh;
+         width: 90%;
+        margin: 0 auto;
+        margin-top: 18vh;
         margin-bottom: 0;
+        --background: #DDDDDD;
+       
     }
 }
 
 .active {
-    color: #33CE93;
+    
     box-shadow: 0px 0px 10px #00000039;
-}
+    div {
+        color: #33CE93;
+    }
+}
+
+.activeTime {
+    color: #33CE93 !important;
+    box-shadow: 0px 0px 10px #00000039;
+}
+
+.buttonActive {
+    ion-button {
+        --background: var(--primary-button-color);
+    }
+}   

src/components/timeSlot/TimeSlot.tsx

@@ -1,13 +1,58 @@
 import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 import styles from "./TimeSlot.module.scss";
-import { chevronBack } from 'ionicons/icons'
+import { chevronBack, key } from 'ionicons/icons'
 import { Link } from "react-router-dom";
+import { useState } from "react";
 
-interface OwnProps {
+interface dates {
+    date: string;
+    day: string;
+}
 
+interface OwnProps {
+    month: string;
+    dates: dates[];
+    timeSlots: string[];
 }
 
-const TimeSlot: React.FC = () => {
+const TimeSlot: React.FC<OwnProps> = (props) => {
+
+    const [highlightedDate, setHighlightedDate] = useState<dates>();
+    const [highlightedTime, setHighlightedTime] = useState<string>("");
+
+    const dates = props.dates.map((date, key) => {
+        return (
+            <div
+                className={styles.date + " " + (date === highlightedDate ? styles.active : "")}
+                key={key}
+                onClick={() => setHighlightedDate(date)}>
+
+                <div className={styles.day}>
+                    {date.day}
+                </div>
+                <div>
+                    {date.date}
+                </div>
+
+            </div>
+        );
+    });
+
+    const timeSlots = props.timeSlots.map((timeSlot, key) => {
+        return (
+            <div
+                className={styles.time + " " + (timeSlot === highlightedTime ? styles.activeTime : "")}
+                key={key}
+                onClick={() => setHighlightedTime(timeSlot)}>
+                {timeSlot}
+            </div>
+        );
+    });
+
+    if (highlightedDate && highlightedTime !== "") {
+
+    }
+
     return (
         <IonPage>
             <header className={styles.header}>
@@ -17,36 +62,20 @@ const TimeSlot: React.FC = () => {
 
             <IonContent>
                 <div className={styles.month}>
-                    April-May
+                    {props.month}
                 </div>
 
                 <div className={styles.dateSlotHolder}>
-                    <div className={styles.date}>
-                        <div className={styles.day}>Tue</div>
-                        <div>27</div>
-                    </div>
-                    <div className={styles.date}>
-                        <div className={styles.day}>Sat</div>
-                        <div>29</div>
-                    </div>
-                    <div className={styles.date}>
-                        <div className={styles.day}>Mon</div>
-                        <div>01</div>
-                    </div>
-                    <div className={styles.date}>
-                        <div className={styles.day}>Wed</div>
-                        <div>03</div>
-                    </div>
+                    {dates}
                 </div>
 
                 <div className={styles.timeSlotHolder}>
-                    <div className={styles.time}>11:00 AM - 1:00 pm</div>
-                    <div className={styles.time}>1:00 PM - 3:00 pm</div>
-                    <div className={styles.time}>3:00 PM - 5:00 pm</div>
+                    {timeSlots}
                 </div>
 
-                <Link to="/" className={styles.timeSlotButton}>
-                    <IonButton shape="round" expand='block'>Confirm for Apr 29, 2021, 11:00 AM</IonButton>
+                <Link to="/"
+                    className={styles.timeSlotButton + " " + (highlightedDate && highlightedTime !== "" ? styles.buttonActive : "")}>
+                    <IonButton shape="round" expand='block'>Confirm slot</IonButton>
                 </Link>
             </IonContent>
 

src/pages/skillInformationStep/SkillInformationStep.module.scss

@@ -1,4 +1,4 @@
-ion-content {
+.skillInfo {
     .description {
         text-align: center;
         width: 85%;

src/pages/skillInformationStep/SkillInformationStep.tsx

@@ -120,7 +120,7 @@ const SkillInformationStep: React.FC = () => {
             <StepHeader
                 stepNumber={1}
                 roundName="Skill Information" />
-            <IonContent>
+            <IonContent className={styles.skillInfo}>
                 <div className={styles.description}>
                     <h3 className={styles.heading}>What are you good at?</h3>
 

src/pages/technicalInterview/TechnicalInterview.module.scss

@@ -1,4 +1,7 @@
 ion-content {
+    display: fixed;
+    height: 100vh;
+    width: 100vw;
     .description {
         ion-icon {
             width: 15rem;
@@ -8,31 +11,127 @@ ion-content {
             margin-top: 4rem;
         }
 
-        h4 {
-            color: #363636;
-            text-align: center;
-            font-size: 2.4rem;
-            font-weight: 300;
-            letter-spacing: 0.024rem;
-            margin-top: 3rem;
+        .meet {
+            h4 {
+                color: #363636;
+                text-align: center;
+                font-size: 2.4rem;
+                font-weight: 300;
+                letter-spacing: 0.024rem;
+                margin-top: 3rem;
+            }
+            p {
+                color: #868686;
+                font-size: 1.4rem;
+                text-align: center;
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 2rem;
+                line-height: 1.8;
+            }
         }
-        p {
-            color: #868686;
-            font-size: 1.4rem;
-            text-align: center;
-            width: 90%;
-            margin: 0 auto;
-            margin-top: 2rem;
-            line-height: 1.8;
+
+        .countdown {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 45vh;
+            justify-content: space-around;
+            h4 {
+                color: #363636;
+                text-align: center;
+                font-size: 2.4rem;
+                font-weight: 300;
+                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;
+                }
+            }
+            .icon {
+                width: 6rem;
+                height: 6rem;
+                background-color: #33CE93;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                ion-icon {
+                    width: 2rem;
+                    height: 2rem;
+                    margin: 0;
+                }
+            }
+            
         }
+
     }
 
     .techinicalInterviewBtn {
         text-decoration: none;
         
         ion-button {
+            width: 95%;
+            margin: 0 auto;
             margin-top: 38vh;
             margin-bottom: 0;
+            --background: var(--primary-button-color);
+        }
+    }
+
+    .buttonHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        width: 95%;
+        margin: 0 auto;
+        margin-top: 7rem;
+        a {
+            text-decoration: none;
+        }
+
+        .dashboardButton {
+            width: 18rem;
+            
+            ion-button {
+                margin: 0;
+                --border-style: solid;
+                --border-width: 0.1rem;
+                --border-color: var(--primary-button-color);
+                --background: transparent;
+                --color: var(--primary-button-color);
+                font-size: 1.6rem;
+                font-weight: 600;
+            }
+        }
+
+        .nextStepButton {
+            width: 18rem;
+
+            margin-left: 1rem;
+            ion-button {
+
+                font-size: 1.6rem;
+                font-weight: 600;
+                --background: var(--primary-button-color);
+
+            }
         }
+      
     }
 }

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -3,26 +3,102 @@ import styles from "./TechnicalInterview.module.scss";
 import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 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 TimeSlot from "../../components/timeSlot/TimeSlot";
 
+interface dates {
+    date: string;
+    day: string;
+}
 
 const TechnicalInterview: React.FC = () => {
+
+    const [isDateSet, setDate] = useState<boolean>(false);
+    const [isTimeSlot, setTimeSlot] = useState<boolean>(false);
+
+    const timeSlots = ["11:00 AM - 1:00 pm", "1:00 PM - 3:00 pm", "3:00 PM - 5:00 pm"];
+
+    const dates: dates[] = [
+        {
+            date: "27",
+            day: "Tue"
+        },
+        {
+            date: "29",
+            day: "Sat"
+        },
+        {
+            date: "01",
+            day: "Mon"
+        },
+        {
+            date: "03",
+            day: "Wed"
+        },
+    ]
+
     return (
         <IonPage>
             <StepHeader stepNumber={3} roundName="Technical Interview" />
             <IonContent>
                 <div className={styles.description}>
                     <IonIcon src={techinicalInterview} />
-                    <h4>You seem interesting! Let's meet.</h4>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
-                    </p>
+                    {
+                        !isDateSet ?
+                            <div className={styles.meet}>
+                                <h4>You seem interesting! Let's meet.</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+                                </p>
+                            </div>
+                            :
+                            <div className={styles.countdown}>
+
+                                <h4>Let's Meet in:</h4>
+                                <div className={styles.timeLeft}>
+                                    <h4 className={styles.time}>02 : 04 : 25 : 53</h4>
+                                    <div className={styles.days}>
+                                        <div>Days</div>
+                                        <div>Hrs</div>
+                                        <div>Mins</div>
+                                        <div>Secs</div>
+                                    </div>
+                                </div>
+                                <h4>Join us on Google Meet</h4>
+                                <div className={styles.icon}>
+                                    <IonIcon src={linkIcon} />
+                                </div>
+                            </div>
+                    }
                 </div>
-                <Link to="/" className={styles.techinicalInterviewBtn}>
-                    <IonButton shape="round" expand='block'>Find a slot</IonButton>
-                </Link>
+                {
+                    !isDateSet ?
+                        <div className={styles.techinicalInterviewBtn} onClick={() => setTimeSlot(true)}>
+                            <IonButton shape="round" expand='block'>Find a slot</IonButton>
+                        </div>
+                        :
+                        <div className={styles.buttonHolder}>
+                            <Link to="/" className={styles.dashboardButton}>
+                                <IonButton shape="round">Goto Dashboard</IonButton>
+                            </Link>
+                            <Link to="/" className={styles.nextStepButton}>
+                                <IonButton shape="round">Goto Next Step</IonButton>
+                            </Link>
+                        </div>
+                }
+
+                {
+                    isTimeSlot &&
+                    <TimeSlot
+                        month="April -May"
+                        dates={dates}
+                        timeSlots={timeSlots} />
+                }
+
             </IonContent>
-        </IonPage>
+        </IonPage >
     );
 }