diff --git a/src/assets/images/React.png b/src/assets/images/React.png new file mode 100644 index 0000000..e48882f Binary files /dev/null and b/src/assets/images/React.png differ diff --git a/src/pages/skillInformationStep/SkillInformationStep.tsx b/src/pages/skillInformationStep/SkillInformationStep.tsx index 708cb5f..1c85343 100644 --- a/src/pages/skillInformationStep/SkillInformationStep.tsx +++ b/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 = () => { + + + ) } diff --git a/src/pages/skillInformationStep/Skills.module.scss b/src/pages/skillInformationStep/Skills.module.scss new file mode 100644 index 0000000..abb89f7 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/pages/skillInformationStep/Skills.tsx b/src/pages/skillInformationStep/Skills.tsx new file mode 100644 index 0000000..6b99453 --- /dev/null +++ b/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) => { + return ( +
+ {props.name} +
{props.name}
+
+ ) +} + +export default Skills; \ No newline at end of file