completed skill information page component

src/pages/skillInformationStep/SkillInformationStep.module.scss

@@ -38,6 +38,9 @@ ion-content {
     }
 
     .button{
+        a {
+            text-decoration: none;
+        }
         ion-button {
             margin: 5rem 2rem;
             --background: var(--primary-button-color);

src/pages/skillInformationStep/SkillInformationStep.tsx

@@ -16,9 +16,40 @@ import MongoDBIcon from '../../assets/images/Mongo.png';
 import postgreSqlIcon from '../../assets/images/PostgreSQL.png';
 import FirebaseIcon from '../../assets/images/Firebase.png';
 import DevOpsIcon from '../../assets/images/DevOps.png';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 
+const skills: string[] = [];
 
 const SkillInformationStep: React.FC = () => {
+
+    const [ischanging, setChange] = useState(0);
+
+    useEffect(() => {
+
+    }, [skills]);
+
+    const isSelected = (skill: string) => {
+        setChange(Math.random());
+
+        if (skills.includes(skill)) {
+
+            const index = skills.indexOf(skill);
+            if (index > -1) {
+                skills.splice(index, 1);
+            }
+
+            return;
+        }
+        skills.push(skill);
+
+    }
+
+    useEffect(() => {
+        console.log("Render");
+    }, [ischanging]);
+
+
     return (
         <IonPage>
             <StepsHeader
@@ -39,11 +70,11 @@ const SkillInformationStep: React.FC = () => {
                     <h5 className={styles.heading}>Front-end:</h5>
 
                     <div className={styles.skills}>
-                        <SkillsCard name='React JS/TS' icon={reactIcon} />
-                        <SkillsCard name='Angular8+' icon={angularIcon} />
-                        <SkillsCard name='Ionic FrameWork' icon={ionicIcon} />
-                        <SkillsCard name='React Native' icon={reactNative} />
-                        <SkillsCard name='VueJS' icon={vueIcon} />
+                        <SkillsCard name='React JS/TS' icon={reactIcon} isHighlighted={skills.includes("React JS/TS")} isSelected={isSelected} />
+                        <SkillsCard name='Angular8+' icon={angularIcon} isHighlighted={skills.includes("Angular8+")} isSelected={isSelected} />
+                        <SkillsCard name='Ionic FrameWork' icon={ionicIcon} isHighlighted={skills.includes("Ionic FrameWork")} isSelected={isSelected} />
+                        <SkillsCard name='React Native' icon={reactNative} isHighlighted={skills.includes("React Native")} isSelected={isSelected} />
+                        <SkillsCard name='VueJS' icon={vueIcon} isHighlighted={skills.includes("VueJS")} isSelected={isSelected} />
                     </div>
 
                 </div>
@@ -53,9 +84,9 @@ const SkillInformationStep: React.FC = () => {
                     <h5 className={styles.heading}>Back-end:</h5>
 
                     <div className={styles.skills}>
-                        <SkillsCard name='NodeJS' icon={nodeJSIcon} />
-                        <SkillsCard name='ExpressJS' icon={ExpressJSICon} />
-                        <SkillsCard name='Django FrameWork' icon={DjangoIcon} />
+                        <SkillsCard name='NodeJS' icon={nodeJSIcon} isHighlighted={skills.includes("NodeJS")} isSelected={isSelected} />
+                        <SkillsCard name='ExpressJS' icon={ExpressJSICon} isHighlighted={skills.includes("ExpressJS")} isSelected={isSelected} />
+                        <SkillsCard name='Django FrameWork' icon={DjangoIcon} isHighlighted={skills.includes("Django FrameWork")} isSelected={isSelected} />
                     </div>
 
                 </div>
@@ -65,9 +96,9 @@ const SkillInformationStep: React.FC = () => {
                     <h5 className={styles.heading}>Database:</h5>
 
                     <div className={styles.skills}>
-                        <SkillsCard name='MySql' icon={MySqlIcon} />
-                        <SkillsCard name='MongoDB' icon={MongoDBIcon} />
-                        <SkillsCard name='PostgreSQL' icon={postgreSqlIcon} />
+                        <SkillsCard name='MySql' icon={MySqlIcon} isHighlighted={skills.includes("MySql")} isSelected={isSelected} />
+                        <SkillsCard name='MongoDB' icon={MongoDBIcon} isHighlighted={skills.includes("MongoDB")} isSelected={isSelected} />
+                        <SkillsCard name='PostgreSQL' icon={postgreSqlIcon} isHighlighted={skills.includes("PostgreSQL")} isSelected={isSelected} />
                     </div>
 
                 </div>
@@ -77,14 +108,16 @@ const SkillInformationStep: React.FC = () => {
                     <h5 className={styles.heading}>Beneficial:</h5>
 
                     <div className={styles.skills}>
-                        <SkillsCard name='Firebase' icon={FirebaseIcon} />
-                        <SkillsCard name='DevOps (Docker / Kubernetes)' icon={DevOpsIcon} />
+                        <SkillsCard name='Firebase' isHighlighted={skills.includes("Firebase")} icon={FirebaseIcon} isSelected={isSelected} />
+                        <SkillsCard name='DevOps (Docker / Kubernetes)' isHighlighted={skills.includes("DevOps (Docker / Kubernetes)")} icon={DevOpsIcon} isSelected={isSelected} />
                     </div>
 
                 </div>
 
                 <div className={styles.button}>
-                    <IonButton shape="round" expand='block'>Done!</IonButton>
+                    <Link to="/">
+                        <IonButton shape="round" expand='block'>Done!</IonButton>
+                    </Link>
                 </div>
 
             </IonContent>

src/pages/skillInformationStep/SkillsCard.module.scss

@@ -6,11 +6,16 @@
     height: 7rem;
     border-radius: 2rem;
     justify-content: space-evenly;
-
+    
     .name {
         color: #868686;
         font-size: 1.4rem;
         font-weight: 500;
         width: 8rem;
     }
+}
+
+.isHighlighted {
+    border: 0.3rem solid #33CE9380;
+    box-shadow: 0px 0px 10px #00000012;
 }

src/pages/skillInformationStep/SkillsCard.tsx

@@ -4,11 +4,14 @@ import styles from './SkillsCard.module.scss';
 interface Props {
     icon: string;
     name: string;
+    isHighlighted?: boolean;
+    isSelected: (skill: string) => void;
+
 }
 
 const SkillsCard: React.FC<Props> = (props) => {
     return (
-        <div className={styles.skill}>
+        <div className={styles.skill + ' ' + (props.isHighlighted ? styles.isHighlighted : "")} onClick={() => props.isSelected(props.name)}>
             <img src={props.icon} alt={props.name} />
             <div className={styles.name}>{props.name}</div>
         </div>