created steps desccription component

src/pages/interviewRounds/Header.module.scss

@@ -17,9 +17,10 @@ ion-header {
     
         .profile {
             background-color: white;
-            width: 3.5rem;
-            height: 3.5rem;
+            width: 3.2rem;
+            height: 3.2rem;
             border-radius: 50%;
+            margin-right: 1rem;
         }
     }
  

src/pages/interviewRounds/InterviewRounds.tsx

@@ -1,48 +1,88 @@
 import styles from './InterviewRounds.module.scss';
 
-import Button from "../../components/button/Button";
 import Header from "./Header";
-import { IonContent, IonHeader, IonPage } from '@ionic/react';
+import { IonContent, IonPage } from '@ionic/react';
 import Steps from './Steps';
+import skillInfo from '../../assets/icons/skill_Information.svg';
+import preliminaryRound from '../../assets/icons/Preliminary_Round.svg';
+import technicalInterview from '../../assets/icons/Technical_Interview.svg';
+import assignment from '../../assets/icons/Assignment.svg';
+import finalInterview from '../../assets/icons/Final_Interview.svg';
+import closingDocs from '../../assets/icons/Closing_Docs.svg';
+import joiningLetter from '../../assets/icons/Joining_Letter.svg';
+import Celebrations from '../../assets/icons/Celebrations.svg';
+
 
 const InterviewRounds: React.FC = () => {
+
+    const setDescription = () => {
+        console.log("hello");
+    }
+
     return (
         <IonPage>
             <Header />
-
             <IonContent>
                 <Steps
                     stepNumber={1}
                     roundName="Skill Information"
-                    isUnlocked={true} />
+                    isUnlocked={true}
+                    descriptionImage={skillInfo}
+
+                    buttonText="Let's start now!"
+                    setDescription={setDescription} />
                 <Steps
                     stepNumber={2}
                     roundName="Preliminary Round"
-                    isUnlocked={false} />
+                    isUnlocked={false}
+
+                    descriptionImage={preliminaryRound}
+                    buttonText="Let's do this"
+                    setDescription={setDescription} />
                 <Steps
                     stepNumber={3}
                     roundName="Technical Interview"
-                    isUnlocked={false} />
+                    isUnlocked={false}
+                    showDescription
+
+                    descriptionImage={technicalInterview}
+                    buttonText="Schedule meeting"
+                    setDescription={setDescription} />
                 <Steps
                     stepNumber={4}
                     roundName="Assignment"
-                    isUnlocked={false} />
+                    isUnlocked={false}
+                    descriptionImage={assignment}
+                    buttonText="Show details"
+                    setDescription={setDescription} />
                 <Steps
                     stepNumber={5}
                     roundName="Final Interview"
-                    isUnlocked={false} />
+                    isUnlocked={false}
+                    descriptionImage={finalInterview}
+                    buttonText="Schedule meeting"
+                    setDescription={setDescription} />
                 <Steps
                     stepNumber={6}
                     roundName="Closing Docs"
-                    isUnlocked={false} />
+                    isUnlocked={false}
+                    descriptionImage={closingDocs}
+                    buttonText="Upload docs"
+                    setDescription={setDescription} />
                 <Steps
                     stepNumber={7}
                     roundName="Joining Letter"
-                    isUnlocked={false} />
+                    isUnlocked={false}
+                    descriptionImage={joiningLetter}
+                    buttonText="Show details"
+                    setDescription={setDescription} />
                 <Steps
                     stepNumber={8}
                     roundName="Celebrations"
-                    isUnlocked={false} />
+                    isUnlocked={false}
+                    descriptionImage={Celebrations}
+                    buttonText="Join workex"
+                    setDescription={setDescription} />
 
             </IonContent>
         </IonPage>

src/pages/interviewRounds/Steps.module.scss

@@ -1,7 +1,12 @@
 ion-item {
-    background-color: #F7F7F7;
-    height: 12vh;
-    border-bottom: 0.5rem solid #ffffff;
+    // background-color: #F7F7F7;
+    --background: #F7F7F7;
+    width: 100vw;
+    border-bottom: 0.2rem solid #ffffff;
+    --padding-end: 0px;
+    --inner-padding-end: 0px;
+    --padding-start: 0px;
+    --inner-padding-start: 0px;
 
     .stepHolder {
         display: flex;

src/pages/interviewRounds/Steps.tsx

@@ -1,25 +1,37 @@
 import styles from './Steps.module.scss';
 import { lockOpen, lockClosed } from 'ionicons/icons'
 import { IonIcon, IonItem } from '@ionic/react';
+import StepsDescription from './StepsDescreption';
 
 interface Props {
     stepNumber: number;
     roundName: string;
     isUnlocked: boolean;
+    showDescription?: boolean;
+    buttonText: string;
+    descriptionImage: string;
+    setDescription: () => void;
 }
 
 const Steps: React.FC<Props> = (props) => {
-    console.log(props.isUnlocked);
     return (
-        <IonItem>
-            <div className={styles.stepHolder}>
-                <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>
+        <IonItem lines='none' onClick={() => props.setDescription()}>
+            {props.showDescription ? <StepsDescription
+                stepNumber={props.stepNumber}
+                roundName={props.roundName}
+                isUnlocked={props.isUnlocked}
+                buttonText={props.buttonText}
+                descriptionImage={props.descriptionImage} /> :
+                <div className={styles.stepHolder}>
+                    <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>
 
-                <div className={styles.stepName}>
-                    <div className={styles.step}>step {props.stepNumber}</div>
-                    <h3 className={styles.heading}>{props.roundName}</h3>
+                    <div className={styles.stepName}>
+                        <div className={styles.step}>step {props.stepNumber}</div>
+                        <h3 className={styles.heading}>{props.roundName}</h3>
+                    </div>
                 </div>
-            </div>
+
+            }
         </IonItem>
     );
 }

src/pages/interviewRounds/StepsDescreption.module.scss

@@ -0,0 +1,56 @@
+.stepDescription {
+    height: 74vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 100vw;
+    background-color: white;
+    transition-delay: 20s;
+    transition-property: height;
+
+    .header {
+        display: flex;
+        align-items: center;
+        height: 12vh;
+        width: 86.6%;
+        .stepName {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            width: 18rem;
+            margin-left: 5.3rem;
+            .step {
+                color: #A3A3A3;
+                font-size: 1.4rem;
+                font-weight: 600;
+            }
+            .heading {
+                margin: 0;
+                color: #363636;
+                font-size: 2.4rem;
+                font-weight: 300;
+            }
+        }
+    }
+
+    .descreption {
+        color: #868686;
+        font-size: 1.4rem;
+        width: 80%;
+        line-height: 2.8rem;
+    }
+}
+
+ion-icon {
+    color: var(--primary-button-color);
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+ion-button {
+    width: 32.8rem;
+    height: 4rem;
+    font-weight: 400;
+}

src/pages/interviewRounds/StepsDescreption.tsx

@@ -1,8 +1,35 @@
-import styles from './StepsDescription.module.scss';
+import styles from './StepsDescreption.module.scss';
+import img from '../../assets/icons/skill_Information.svg';
 
-const StepsDescription: React.FC = () => {
+import { IonButton, IonIcon } from '@ionic/react';
+import { lockOpen, lockClosed } from 'ionicons/icons'
+
+interface Props {
+    stepNumber: number;
+    roundName: string;
+    isUnlocked: boolean;
+    buttonText: string;
+    descriptionImage: string;
+}
+
+const StepsDescription: React.FC<Props> = (props) => {
     return (
-        <div>
+        <div className={styles.stepDescription}>
+            <div className={styles.header}>
+                <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>
+
+                <div className={styles.stepName}>
+                    <div className={styles.step}>step {props.stepNumber}</div>
+                    <h3 className={styles.heading}>{props.roundName}</h3>
+                </div>
+            </div>
+            <div className={styles.image}>
+                <img src={props.descriptionImage} alt="skill info" />
+            </div>
+            <div className={styles.descreption}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </div>
+            <IonButton shape="round" color='success' expand='block'>{props.buttonText}</IonButton>
 
         </div>
     );