select skills on partnerRequest

src/components/CandidateSidebar/candidateSidebar.scss

@@ -12,7 +12,7 @@
     margin-bottom: 1rem;
 
     h2 {
-      font-size: 3rem;
+      font-size: 2.5rem;
       font-family: 'GT Eesti Pro Display', sans-serif;
       font-weight: 700;
       font-style: normal;
@@ -26,7 +26,6 @@
     flex-wrap: wrap;
     justify-content: flex-start;
     padding: 0 1rem;
-    margin-bottom: 80px;
   }
 
   &__info {
@@ -48,8 +47,8 @@
 }
 
 .candidate-sidebar__info > img {
-  width: 180px;
-  height: 180px;
+  width: 150px;
+  height: 150px;
   border-radius: 100px;
 }
 
@@ -65,7 +64,7 @@
 
 .candidate-sidebar__experience {
   font-family: 'GT Eesti Pro Display', sans-serif;
-  font-size: 3em;
+  font-size: 2.5em;
   font-weight: 700;
   font-style: normal;
   letter-spacing: normal;

src/pages/PartnerAddRequest/PartnerAddRequest.js

@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {Footer} from "../../components/Footer/Footer";
+import {Navigate} from "react-router-dom";
 
 import arrowDown from "../../images/selectArrow.png"
 import processImg from "../../images/partnerAddRequestFirstImg.png"
 import reportImg from "../../images/partnerAddRequestSecondImg.png"
 import documentsImg from "../../images/partnerAddRequestThirdInfo.png"
+import deleteIcon from "../../images/close.png"
 
-import {Navigate} from "react-router-dom";
 
 import './partnerAddRequest.scss'
 
@@ -17,6 +18,13 @@ export const PartnerAddRequest = () => {
     if(localStorage.getItem('role_status') !== '18') {
         return <Navigate to="/profile" replace/>
     }
+
+    const [skills, setSkills] = useState(['REST API', 'Async/await'])
+    const [selectedSkills, setSelectedSkills] = useState([])
+    const [filteredSkills, setFilteredSkills] = useState(skills)
+
+    const [openSkillsSelect, setOpenSkillsSelect] = useState(false)
+
     return (
         <div className='partnerAddRequest'>
             <ProfileHeader />
@@ -51,6 +59,50 @@ export const PartnerAddRequest = () => {
                                     </div>
                                 </div>
                             </div>
+                            <div className='form__block__section'>
+                                <h3>Навыки</h3>
+                                <div className='form__block__skills' onClick={() => {setOpenSkillsSelect(true)}}>
+                                    {Boolean(selectedSkills.length) &&
+                                        selectedSkills.map((skill, index) => {
+                                            return<div className='skill' key={index}>
+                                                <span >{skill}</span>
+                                                <img src={deleteIcon} alt='delete'
+                                                     onClick={() => {
+                                                         setFilteredSkills(prevArray => [...prevArray, skill])
+                                                         setSelectedSkills(selectedSkills.filter((skill, indexSkill) => {
+                                                             return indexSkill !== index
+                                                         }))
+                                                    }} />
+                                            </div>
+                                        })
+                                    }
+                                    {!selectedSkills.length &&
+                                        <input type='text' placeholder='Выберите навыки'
+                                               onChange={(e) => {
+                                                   setFilteredSkills(skills.filter((skill) => {
+                                                       return skill.toLowerCase().includes(e.target.value.toLowerCase())
+                                                   }))
+                                               }} />
+                                    }
+                                </div>
+                                {openSkillsSelect && Boolean(filteredSkills.length) &&
+                                    <div className='form__block__dropDown'>
+                                        {filteredSkills.map((skill, index) => {
+                                            return <span
+                                                key={skill}
+                                                onClick={() => {
+                                                    setSelectedSkills(prevArray => [...prevArray, skill])
+                                                    setFilteredSkills(filteredSkills.filter((skill, skillIndex) => {
+                                                        return skillIndex !== index
+                                                    }))
+                                                    setOpenSkillsSelect(false)
+                                                }}
+                                            >
+                                                        {skill}</span>
+                                        })}
+                                    </div>
+                                }
+                            </div>
                         </div>
                         <div className='partnerAddRequest__form__block form__block'>
                             <h3 className='form__block__title'>Квалификация</h3>

src/pages/PartnerAddRequest/partnerAddRequest.scss

@@ -47,6 +47,7 @@
     padding: 25px 95px 30px 55px;
     min-width: 600px;
     width: 100%;
+    position: relative;
 
     @media (max-width: 750px) {
       padding: 15px 50px 15px 30px;
@@ -62,7 +63,8 @@
     }
 
     &__section {
-      margin-bottom: 35px;
+      margin-bottom: 22px;
+      position: relative;
 
       &:last-child {
         margin-bottom: 0;
@@ -182,6 +184,73 @@
       line-height: 32px;
       border: none;
     }
+
+    &__skills {
+      display: flex;
+      gap: 5px;
+      flex-wrap: wrap;
+      background: #EFF2F7;
+      border-radius: 8px;
+      padding: 8px 12px 9px;
+      position: relative;
+      cursor: pointer;
+
+      .skill {
+        background: #8DC63F;
+        border-radius: 12px;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: #263238;
+        padding: 6px 6px 5px;
+        max-width: 100px;
+        width: 100%;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+
+        img {
+          width: 13px;
+        }
+      }
+
+      input {
+        border: none;
+        outline: none;
+        width: 100%;
+        background: none;
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 18px;
+        height: 25px;
+        color: #263238;
+      }
+    }
+
+    &__dropDown {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      background: #EFF2F7;
+      border-radius: 8px;
+      padding: 5px 20px;
+      row-gap: 10px;
+      z-index: 100;
+
+      span {
+        cursor: pointer;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: #263238;
+        background: #8DC63F;
+        border-radius: 12px;
+        padding: 5px;
+        max-width: 100px;
+        width: 100%;
+        text-align: center;
+      }
+    }
   }
 
   footer {