created skills component in skill info page

src/pages/skillInformationStep/SkillInformationStep.tsx

@@ -1,7 +1,8 @@
 import styles from './SlillInformation.module.scss';
-
 import { IonContent, IonPage } from "@ionic/react";
 import StepsHeader from "../../components/stepsHeader/StepsHeader";
+import Skills from './Skills';
+import reactIcon from '../../assets/images/React.png';
 
 const SkillInformationStep: React.FC = () => {
     return (
@@ -9,6 +10,9 @@ const SkillInformationStep: React.FC = () => {
             <StepsHeader
                 stepNumber={1}
                 roundName="Skill Information" />
+            <IonContent>
+                <Skills name='React JS/TS' icon={reactIcon} />
+            </IonContent>
         </IonPage>
     )
 }

src/pages/skillInformationStep/Skills.module.scss

@@ -0,0 +1,16 @@
+.skill {
+    display: flex;
+    align-items: center;
+    box-shadow: 0px 0px 5px #00000012;
+    width: 16rem;
+    height: 7rem;
+    border-radius: 2rem;
+    justify-content: space-evenly;
+    margin: 5rem;
+
+    .name {
+        color: #868686;
+        font-size: 1.4rem;
+        font-weight: 500;
+    }
+}

src/pages/skillInformationStep/Skills.tsx

@@ -0,0 +1,18 @@
+import { IonIcon } from '@ionic/react';
+import styles from './Skills.module.scss';
+
+interface Props {
+    icon: string;
+    name: string;
+}
+
+const Skills: React.FC<Props> = (props) => {
+    return (
+        <div className={styles.skill}>
+            <img src={props.icon} alt={props.name} />
+            <div className={styles.name}>{props.name}</div>
+        </div>
+    )
+}
+
+export default Skills;