created Steps component for interviewRounds page

src/pages/interviewRounds/InterviewRounds.tsx

@@ -2,14 +2,50 @@ import styles from './InterviewRounds.module.scss';
 
 import Button from "../../components/button/Button";
 import Header from "./Header";
-import { IonHeader, IonPage } from '@ionic/react';
+import { IonContent, IonHeader, IonPage } from '@ionic/react';
+import Steps from './Steps';
 
 const InterviewRounds: React.FC = () => {
     return (
         <IonPage>
             <Header />
-        </IonPage>
 
+            <IonContent>
+                <Steps
+                    stepNumber={1}
+                    roundName="Skill Information"
+                    isUnlocked={true} />
+                <Steps
+                    stepNumber={2}
+                    roundName="Preliminary Round"
+                    isUnlocked={false} />
+                <Steps
+                    stepNumber={3}
+                    roundName="Technical Interview"
+                    isUnlocked={false} />
+                <Steps
+                    stepNumber={4}
+                    roundName="Assignment"
+                    isUnlocked={false} />
+                <Steps
+                    stepNumber={5}
+                    roundName="Final Interview"
+                    isUnlocked={false} />
+                <Steps
+                    stepNumber={6}
+                    roundName="Closing Docs"
+                    isUnlocked={false} />
+                <Steps
+                    stepNumber={7}
+                    roundName="Joining Letter"
+                    isUnlocked={false} />
+                <Steps
+                    stepNumber={8}
+                    roundName="Celebrations"
+                    isUnlocked={false} />
+
+            </IonContent>
+        </IonPage>
     )
 }
 

src/pages/interviewRounds/Steps.module.scss

@@ -0,0 +1,40 @@
+ion-item {
+    background-color: #F7F7F7;
+    height: 12vh;
+    border-bottom: 0.5rem solid #ffffff;
+
+    .stepHolder {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        height: 12vh;
+        width: 80%;
+
+        ion-icon {
+            color: var(--primary-button-color);
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+        
+        .stepName {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            width: 18rem;
+    
+            .step {
+                color: #A3A3A3;
+                font-size: 1.4rem;
+                font-weight: 600;
+            }
+            .heading {
+                margin: 0;
+                color: #363636;
+                font-size: 2.4rem;
+                font-weight: 300;
+            }
+        }
+    }
+
+}

src/pages/interviewRounds/Steps.tsx

@@ -0,0 +1,27 @@
+import styles from './Steps.module.scss';
+import { lockOpen, lockClosed } from 'ionicons/icons'
+import { IonIcon, IonItem } from '@ionic/react';
+
+interface Props {
+    stepNumber: number;
+    roundName: string;
+    isUnlocked: boolean;
+}
+
+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>
+
+                <div className={styles.stepName}>
+                    <div className={styles.step}>step {props.stepNumber}</div>
+                    <h3 className={styles.heading}>{props.roundName}</h3>
+                </div>
+            </div>
+        </IonItem>
+    );
+}
+
+export default Steps;

src/pages/interviewRounds/StepsDescreption.tsx

@@ -0,0 +1,11 @@
+import styles from './StepsDescription.module.scss';
+
+const StepsDescription: React.FC = () => {
+    return (
+        <div>
+
+        </div>
+    );
+}
+
+export default StepsDescription;