profilePage

This commit is contained in:
Николай Полтщук 2023-01-09 18:04:06 +03:00
parent 731244905f
commit 4c636c424a
6 changed files with 548 additions and 543 deletions

View File

@ -42,8 +42,8 @@ export const ProfileHeader = () => {
<div className='profileHeader__info'> <div className='profileHeader__info'>
<div className='profileHeader__container'> <div className='profileHeader__container'>
<nav className='profileHeader__nav'> <nav className='profileHeader__nav'>
<NavLink to={'/profile'}>Резюме</NavLink> <NavLink to={'/summary'}>Резюме</NavLink>
<NavLink to={'/profileCalendar'}>Отчетность</NavLink> <NavLink to={'/profile'}>Отчетность</NavLink>
<a>Трекер</a> <a>Трекер</a>
<a>Выплаты</a> <a>Выплаты</a>
<a>Настройки</a> <a>Настройки</a>

View File

@ -2,44 +2,19 @@
background: #F1F1F1; background: #F1F1F1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
//
//&__container {
// max-width: 1160px;
// padding: 0 10px;
// margin: 20px auto;
// position: relative;
// display: flex;
// flex-direction: column;
//}
&__content {
display: flex;
flex-direction: column;
}
&__title { &__title {
font-weight: 700; font-weight: 700;
font-size: 22px; font-size: 22px;
line-height: 32px; line-height: 32px;
margin-bottom: 0; color: #000000;
span { span {
color: #52B709; color: #52B709;
} }
}
&__back { @media (max-width: 560px) {
display: flex; font-size: 17px;
align-items: center; margin-top: 20px;
column-gap: 30px;
margin-top: 20px;
cursor: pointer;
p {
margin-bottom: 0;
font-size: 14px;
line-height: 32px;
font-weight: 500;
} }
} }
@ -52,327 +27,93 @@
align-items: center; align-items: center;
padding: 0 130px 0 45px; padding: 0 130px 0 45px;
justify-content: space-between; justify-content: space-between;
@media (max-width: 930px) {
padding: 0 40px;
}
@media (max-width: 690px) {
padding: 0 20px;
min-height: 80px;
}
} }
&__person { &__items {
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
column-gap: 45px;
@media (max-width: 690px) {
column-gap: 20px;
}
}
&__avatar {
width: 88px;
height: 88px;
border-radius: 100px;
@media (max-width: 690px) {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
}
}
&__name {
font-weight: 500;
font-size: 16px;
line-height: 32px;
position: relative;
@media (max-width: 690px) {
font-size: 14px;
margin-right: 10px;
line-height: 15px;
}
&:after {
content: '';
position: absolute;
background: #52B709;
border-radius: 12px;
width: 70%;
height: 8px;
bottom: -14px;
left: 0;
}
}
&__git {
background: #52B709;
border-radius: 44px;
width: 177px;
height: 50px;
font-weight: 500;
font-size: 16px;
line-height: 32px;
color: white;
border: none;
@media (max-width: 690px) {
width: 120px;
}
}
&__skills {
background: #FFFFFF;
border-radius: 12px;
margin-top: 35px;
}
&__sections__head {
display: flex;
min-height: 69px;
background: #E1FCCF;
border-radius: 12px 12px 0px 0px;
align-items: center;
padding: 0 35px 0 50px;
justify-content: space-between;
@media (max-width: 550px) {
padding: 0 15px;
}
h3 {
font-style: normal;
font-size: 18px;
line-height: 32px;
@media (max-width: 660px) {
line-height: 20px;
}
}
button {
background: #FFFFFF;
border-radius: 44px;
padding: 10px 20px;
display: flex;
align-items: center;
border: none;
height: 42px;
font-weight: 500;
font-size: 14px;
line-height: 32px;
white-space: nowrap;
@media (max-width: 520px) {
font-size: 12px;
padding: 10px;
white-space: nowrap;
}
}
}
.skills__section {
&__items {
padding: 25px 35px 25px 50px;
@media (max-width: 550px) {
padding: 15px 15px 20px;
}
&__wrapper {
max-width: 630px;
display: flex;
flex-wrap: wrap;
column-gap: 5px;
.skill_item {
font-weight: 700;
font-size: 16px;
line-height: 32px;
white-space: nowrap;
text-transform: uppercase;
}
}
}
}
&__experience {
display: flex;
flex-direction: column;
row-gap: 20px;
margin-top: 30px; margin-top: 30px;
row-gap: 25px;
column-gap: 35px;
.experience { @media (max-width: 1175px) {
&__block { justify-content: center;
background: #FFFFFF; }
border-radius: 12px;
.item {
max-width: 353px;
width: 100%;
padding: 35px 45px 15px 30px;
background: #FFFFFF;
border-radius: 12px;
text-decoration: none;
cursor: pointer;
@media (max-width: 1175px) {
width: 48%;
max-width: none;
} }
&__content { @media (max-width: 925px) {
padding: 15px 35px 15px 50px; width: 100%;
}
@media (max-width: 550px) { &__about {
padding: 15px 15px 20px; display: flex;
} column-gap: 20px;
align-items: center;
margin-bottom: 30px;
h2 { h3 {
font-weight: 700; color: #000000;
font-size: 16px; font-weight: 500;
line-height: 32px; font-size: 18px;
line-height: 22px;
max-width: 125px;
margin-bottom: 0; margin-bottom: 0;
} }
}
&__info {
display: flex;
justify-content: space-between;
align-items: center;
p { p {
font-weight: 400; font-weight: 700;
font-size: 16px; font-size: 12px;
line-height: 32px; line-height: 20px;
color: #000000;
margin-bottom: 0; margin-bottom: 0;
span {
color: #52B709;
font-weight: 700;
}
}
&Link {
width: 48px;
height: 48px;
background: #DDEEC6;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
} }
} }
} }
} }
&__sectionGit { .container {
margin-top: 25px; max-width: 1160px;
margin-top: 23px;
&Items { @media (max-width: 570px) {
margin-top: 25px; margin-top: 0;
display: flex;
flex-wrap: wrap;
row-gap: 20px;
column-gap: 25px;
justify-content: space-between;
.gitItem {
width: 48%;
display: flex;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
border-radius: 12px;
padding: 35px 30px 30px 45px;
@media (max-width: 825px) {
width: 100%;
}
@media (max-width: 470px) {
padding: 15px;
}
&__info {
display: flex;
flex-direction: column;
max-width: 350px;
width: 100%;
@media (max-width: 825px) {
max-width: 100%;
}
&__about {
display: flex;
align-items: center;
column-gap: 15px;
}
&__name {
h4 {
font-weight: 700;
font-size: 18px;
line-height: 32px;
margin-bottom: 0;
}
p {
font-weight: 300;
font-size: 16px;
line-height: 32px;
margin-bottom: 0;
white-space: nowrap;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
@media (max-width: 1040px) {
max-width: 250px;
}
@media (max-width: 890px) {
max-width: 200px;
}
@media (max-width: 825px) {
max-width: 500px;
}
@media (max-width: 720px) {
max-width: 250px;
}
@media (max-width: 470px) {
max-width: 200px;
}
}
}
&__specification {
margin-top: 30px;
display: flex;
align-items: center;
padding-left: 10px;
column-gap: 25px;
@media (max-width: 470px) {
margin-top: 0;
}
span {
background: #D4F123;
border-radius: 12px;
max-width: 260px;
width: 100%;
height: 8px;
}
p {
margin-bottom: 0;
font-weight: 400;
font-size: 14px;
line-height: 32px;
}
}
}
&__link {
border-radius: 50%;
background: #DDEEC6;
min-width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
}
} }
} }
footer { footer {
margin-top: 70px; margin-top: 70px;
} }
.container {
max-width: 1160px;
margin-top: 23px;
@media (max-width: 570px) {
margin-top: 0;
}
}
} }

View File

@ -2,17 +2,47 @@
background: #F1F1F1; background: #F1F1F1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
//
//&__container {
// max-width: 1160px;
// padding: 0 10px;
// margin: 20px auto;
// position: relative;
// display: flex;
// flex-direction: column;
//}
&__content {
display: flex;
flex-direction: column;
}
&__title { &__title {
font-weight: 700; font-weight: 700;
font-size: 22px; font-size: 22px;
line-height: 32px; line-height: 32px;
color: #000000; margin-bottom: 0;
span { span {
color: #52B709; color: #52B709;
} }
} }
&__back {
display: flex;
align-items: center;
column-gap: 30px;
margin-top: 20px;
cursor: pointer;
p {
margin-bottom: 0;
font-size: 14px;
line-height: 32px;
font-weight: 500;
}
}
&__info { &__info {
min-height: 128px; min-height: 128px;
background: white; background: white;
@ -22,93 +52,327 @@
align-items: center; align-items: center;
padding: 0 130px 0 45px; padding: 0 130px 0 45px;
justify-content: space-between; justify-content: space-between;
}
&__items { @media (max-width: 930px) {
display: flex; padding: 0 40px;
flex-wrap: wrap;
margin-top: 30px;
row-gap: 25px;
column-gap: 35px;
@media (max-width: 1175px) {
justify-content: center;
} }
.item { @media (max-width: 690px) {
max-width: 353px; padding: 0 20px;
width: 100%; min-height: 80px;
padding: 35px 45px 15px 30px; }
background: #FFFFFF; }
&__person {
display: flex;
align-items: center;
column-gap: 45px;
@media (max-width: 690px) {
column-gap: 20px;
}
}
&__avatar {
width: 88px;
height: 88px;
border-radius: 100px;
@media (max-width: 690px) {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
}
}
&__name {
font-weight: 500;
font-size: 16px;
line-height: 32px;
position: relative;
@media (max-width: 690px) {
font-size: 14px;
margin-right: 10px;
line-height: 15px;
}
&:after {
content: '';
position: absolute;
background: #52B709;
border-radius: 12px; border-radius: 12px;
text-decoration: none; width: 70%;
cursor: pointer; height: 8px;
bottom: -14px;
left: 0;
}
}
@media (max-width: 1175px) { &__git {
width: 48%; background: #52B709;
max-width: none; border-radius: 44px;
width: 177px;
height: 50px;
font-weight: 500;
font-size: 16px;
line-height: 32px;
color: white;
border: none;
@media (max-width: 690px) {
width: 120px;
}
}
&__skills {
background: #FFFFFF;
border-radius: 12px;
margin-top: 35px;
}
&__sections__head {
display: flex;
min-height: 69px;
background: #E1FCCF;
border-radius: 12px 12px 0px 0px;
align-items: center;
padding: 0 35px 0 50px;
justify-content: space-between;
@media (max-width: 550px) {
padding: 0 15px;
}
h3 {
font-style: normal;
font-size: 18px;
line-height: 32px;
@media (max-width: 660px) {
line-height: 20px;
}
}
button {
background: #FFFFFF;
border-radius: 44px;
padding: 10px 20px;
display: flex;
align-items: center;
border: none;
height: 42px;
font-weight: 500;
font-size: 14px;
line-height: 32px;
white-space: nowrap;
@media (max-width: 520px) {
font-size: 12px;
padding: 10px;
white-space: nowrap;
}
}
}
.skills__section {
&__items {
padding: 25px 35px 25px 50px;
@media (max-width: 550px) {
padding: 15px 15px 20px;
} }
@media (max-width: 925px) { &__wrapper {
width: 100%; max-width: 630px;
}
&__about {
display: flex; display: flex;
column-gap: 20px; flex-wrap: wrap;
align-items: center; column-gap: 5px;
margin-bottom: 30px;
h3 { .skill_item {
color: #000000; font-weight: 700;
font-weight: 500; font-size: 16px;
font-size: 18px; line-height: 32px;
line-height: 22px; white-space: nowrap;
max-width: 125px; text-transform: uppercase;
margin-bottom: 0;
} }
} }
}
}
&__info { &__experience {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; row-gap: 20px;
margin-top: 30px;
.experience {
&__block {
background: #FFFFFF;
border-radius: 12px;
}
&__content {
padding: 15px 35px 15px 50px;
@media (max-width: 550px) {
padding: 15px 15px 20px;
}
h2 {
font-weight: 700;
font-size: 16px;
line-height: 32px;
margin-bottom: 0;
}
p { p {
font-weight: 700; font-weight: 400;
font-size: 12px; font-size: 16px;
line-height: 20px; line-height: 32px;
color: #000000;
margin-bottom: 0; margin-bottom: 0;
span {
color: #52B709;
font-weight: 700;
}
}
&Link {
width: 48px;
height: 48px;
background: #DDEEC6;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
} }
} }
} }
} }
.container { &__sectionGit {
max-width: 1160px; margin-top: 25px;
margin-top: 23px;
@media (max-width: 570px) { &Items {
margin-top: 0; margin-top: 25px;
display: flex;
flex-wrap: wrap;
row-gap: 20px;
column-gap: 25px;
justify-content: space-between;
.gitItem {
width: 48%;
display: flex;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
border-radius: 12px;
padding: 35px 30px 30px 45px;
@media (max-width: 825px) {
width: 100%;
}
@media (max-width: 470px) {
padding: 15px;
}
&__info {
display: flex;
flex-direction: column;
max-width: 350px;
width: 100%;
@media (max-width: 825px) {
max-width: 100%;
}
&__about {
display: flex;
align-items: center;
column-gap: 15px;
}
&__name {
h4 {
font-weight: 700;
font-size: 18px;
line-height: 32px;
margin-bottom: 0;
}
p {
font-weight: 300;
font-size: 16px;
line-height: 32px;
margin-bottom: 0;
white-space: nowrap;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
@media (max-width: 1040px) {
max-width: 250px;
}
@media (max-width: 890px) {
max-width: 200px;
}
@media (max-width: 825px) {
max-width: 500px;
}
@media (max-width: 720px) {
max-width: 250px;
}
@media (max-width: 470px) {
max-width: 200px;
}
}
}
&__specification {
margin-top: 30px;
display: flex;
align-items: center;
padding-left: 10px;
column-gap: 25px;
@media (max-width: 470px) {
margin-top: 0;
}
span {
background: #D4F123;
border-radius: 12px;
max-width: 260px;
width: 100%;
height: 8px;
}
p {
margin-bottom: 0;
font-weight: 400;
font-size: 14px;
line-height: 32px;
}
}
}
&__link {
border-radius: 50%;
background: #DDEEC6;
min-width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
}
} }
} }
footer { footer {
margin-top: 70px; margin-top: 70px;
} }
.container {
max-width: 1160px;
margin-top: 23px;
@media (max-width: 570px) {
margin-top: 0;
}
}
} }

View File

@ -8,7 +8,7 @@ export function transformHtml(text) {
return (el != null && el != "" || el === 0) return (el != null && el != "" || el === 0)
}) })
const finalHtml = startHtml.map((item) => { const finalHtml = startHtml.map((item) => {
return `<div class='experience__block'><div class="profile__sections__head"><h3>Описание опыта работы</h3><button>Редактировать раздел</button></div><div class="experience__content">${item.split('<h3>')[0]}</div></div>` return `<div class='experience__block'><div class="summary__sections__head"><h3>Описание опыта работы</h3><button>Редактировать раздел</button></div><div class="experience__content">${item.split('<h3>')[0]}</div></div>`
}) })
return {__html: finalHtml.join('')} return {__html: finalHtml.join('')}
} }

View File

@ -1,101 +1,96 @@
import React, {useEffect, useState} from 'react'; import React from 'react';
import { ProfileHeader } from "../components/Profile/ProfileHeader"; import {useSelector} from "react-redux";
import {getProfileInfo} from "../redux/outstaffingSlice"; import {getProfileInfo} from "../redux/outstaffingSlice";
import { useSelector } from "react-redux"; import {ProfileHeader} from "../components/Profile/ProfileHeader";
import {transformHtml} from "../helper"; import {NavLink} from "react-router-dom";
import { Footer } from '../components/Footer/Footer' import {Footer} from "../components/Footer/Footer";
import arrow from "../images/right-arrow.png"; import reportsIcon from "../images/reports.png"
import summaryIcon from "../images/summaryIcon.png"
import timerIcon from "../images/timerIcon.png"
import paymentIcon from "../images/paymentIcon.png"
import settingIcon from "../images/settingIcon.png"
import rightArrow from "../images/arrowRight.png" import rightArrow from "../images/arrowRight.png"
import gitImgItem from "../images/gitItemImg.png"
import './../components/Profile/profile.scss' import '../components/Profile/profile.scss'
import {fetchGet} from "../server/server";
export const Profile = () => { export const Profile = () => {
const profileInfo = useSelector(getProfileInfo) const profileInfo = useSelector(getProfileInfo)
const [openGit, setOpenGit] = useState(false);
const [gitInfo, setGitInfo] = useState([])
useEffect(() => {
fetchGet({
link: `${process.env.REACT_APP_API_URL}/api/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`,
}).then((responseGit) => {
setGitInfo(responseGit)
})
}, [])
return( return(
<div className='profile'> <div className='profile'>
<ProfileHeader/> <ProfileHeader/>
<div className='container'> <div className='container'>
<div className='profile__content'> <h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
<h2 className='profile__title'>Ваше резюме {openGit && <span>- Git</span>}</h2> <div className='summary__info'>
{openGit && <div className='profile__back' onClick={() => setOpenGit(false)}> <div className='summary__person'>
<img src={arrow} alt='arrow'/> <img src={profileInfo.photo} className='summary__avatar' />
<p>Вернуться</p> <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
</div>}
<div className='profile__info'>
<div className='profile__person'>
<img src={profileInfo.photo} className='profile__avatar' />
<p className='profile__name'>{profileInfo.fio} {profileInfo.specification}</p>
</div>
{!openGit &&
<button className='profile__git' onClick={()=> setOpenGit(true)}>Git</button>
}
</div> </div>
</div> </div>
{!openGit && <div className='profile__items'>
<div className='profile__skills skills__section'> <NavLink to={'/ProfileCalendar'} className='item'>
<div className='profile__sections__head'> <div className='item__about'>
<h3>Основной стек</h3> <img src={reportsIcon} />
<button>Редактировать раздел</button> <h3>Ваша отчетность</h3>
</div> </div>
<div className='skills__section__items'> <div className='item__info'>
<div className='skills__section__items__wrapper'> <p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
{profileInfo.skillValues && profileInfo.skillValues.map((skill) => { <div className='item__infoLink'>
return <span key={skill.id} className='skill_item'>{skill.skill.name}</span> <img src={rightArrow} />
})}
</div> </div>
</div> </div>
</div> </NavLink>
} <NavLink to={'/summary'} className='item'>
{profileInfo.vc_text && !openGit && <div className='item__about'>
<div className='profile__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}> <img src={summaryIcon} />
</div> <h3>Данные и резюме</h3>
}
{openGit &&
<div className='profile__sectionGit'>
<div className='profile__sections__head'>
<h3>Страница портфолио кода разработчика</h3>
<button>Редактировать раздел</button>
</div> </div>
<div className='profile__sectionGitItems'> <div className='item__info'>
{gitInfo.length && gitInfo.map((itemGit) => { <p>Ваше резюме<br/><span>заполнено</span></p>
return <div key={itemGit.id} className='profile__sectionGitItem gitItem'> <div className='item__infoLink'>
<div className='gitItem__info'> <img src={rightArrow} />
<div className='gitItem__info__about'> </div>
<img src={gitImgItem} alt='gitImg' />
<div className='gitItem__info__name'>
<h4>{itemGit.title}</h4>
<p>{itemGit.description}</p>
</div>
</div>
<div className='gitItem__info__specification'>
<span></span>
<p>{itemGit.main_stack}</p>
</div>
</div>
<a className='gitItem__link' href={itemGit.link} target="_blank">
<img src={rightArrow} alt='arrowRight' />
</a>
</div>
})
}
</div> </div>
</div> </NavLink>
} <NavLink to={'/profile'} className='item'>
<div className='item__about'>
<img src={timerIcon} />
<h3>Трекер времени</h3>
</div>
<div className='item__info'>
<p>Сколько времени занимает<br/> выполнение задач</p>
<div className='item__infoLink'>
<img src={rightArrow} />
</div>
</div>
</NavLink>
<NavLink to={'/profile'} className='item'>
<div className='item__about'>
<img src={paymentIcon} />
<h3>Выплаты</h3>
</div>
<div className='item__info'>
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
<div className='item__infoLink'>
<img src={rightArrow} />
</div>
</div>
</NavLink>
<NavLink to={'/profile'} className='item'>
<div className='item__about'>
<img src={settingIcon} />
<h3>Настройки аккаунта</h3>
</div>
<div className='item__info'>
<p>Перейдите чтобы начать<br/> редактирование</p>
<div className='item__infoLink'>
<img src={rightArrow} />
</div>
</div>
</NavLink>
</div>
</div> </div>
<Footer/> <Footer/>
</div> </div>
) )
} }

View File

@ -1,96 +1,101 @@
import React from 'react'; import React, {useEffect, useState} from 'react';
import {useSelector} from "react-redux"; import { ProfileHeader } from "../components/Profile/ProfileHeader";
import {getProfileInfo} from "../redux/outstaffingSlice"; import {getProfileInfo} from "../redux/outstaffingSlice";
import {ProfileHeader} from "../components/Profile/ProfileHeader"; import { useSelector } from "react-redux";
import {NavLink} from "react-router-dom"; import {transformHtml} from "../helper";
import {Footer} from "../components/Footer/Footer"; import { Footer } from '../components/Footer/Footer'
import reportsIcon from "../images/reports.png" import arrow from "../images/right-arrow.png";
import summaryIcon from "../images/summaryIcon.png"
import timerIcon from "../images/timerIcon.png"
import paymentIcon from "../images/paymentIcon.png"
import settingIcon from "../images/settingIcon.png"
import rightArrow from "../images/arrowRight.png" import rightArrow from "../images/arrowRight.png"
import gitImgItem from "../images/gitItemImg.png"
import './../components/Profile/summary.scss' import '../components/Profile/summary.scss'
import {fetchGet} from "../server/server";
export const Summary = () => { export const Summary = () => {
const profileInfo = useSelector(getProfileInfo) const profileInfo = useSelector(getProfileInfo)
const [openGit, setOpenGit] = useState(false);
const [gitInfo, setGitInfo] = useState([])
useEffect(() => {
fetchGet({
link: `${process.env.REACT_APP_API_URL}/api/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`,
}).then((responseGit) => {
setGitInfo(responseGit)
})
}, [])
return( return(
<div className='summary'> <div className='summary'>
<ProfileHeader/> <ProfileHeader/>
<div className='container'> <div className='container'>
<h2 className='summary__title'>Добрый день, <span>{profileInfo.fio}</span></h2> <div className='summary__content'>
<div className='summary__info'> <h2 className='summary__title'>Ваше резюме {openGit && <span>- Git</span>}</h2>
<div className='profile__person'> {openGit && <div className='summary__back' onClick={() => setOpenGit(false)}>
<img src={profileInfo.photo} className='profile__avatar' /> <img src={arrow} alt='arrow'/>
<p className='profile__name'>{profileInfo.fio} {profileInfo.specification}</p> <p>Вернуться</p>
</div>}
<div className='summary__info'>
<div className='summary__person'>
<img src={profileInfo.photo} className='summary__avatar' />
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
</div>
{!openGit &&
<button className='summary__git' onClick={()=> setOpenGit(true)}>Git</button>
}
</div> </div>
</div> </div>
<div className='summary__items'> {!openGit &&
<NavLink to={'/profile'} className='item'> <div className='summary__skills skills__section'>
<div className='item__about'> <div className='summary__sections__head'>
<img src={reportsIcon} /> <h3>Основной стек</h3>
<h3>Ваша отчетность</h3> <button>Редактировать раздел</button>
</div> </div>
<div className='item__info'> <div className='skills__section__items'>
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p> <div className='skills__section__items__wrapper'>
<div className='item__infoLink'> {profileInfo.skillValues && profileInfo.skillValues.map((skill) => {
<img src={rightArrow} /> return <span key={skill.id} className='skill_item'>{skill.skill.name}</span>
})}
</div> </div>
</div> </div>
</NavLink> </div>
<NavLink to={'/profile'} className='item'> }
<div className='item__about'> {profileInfo.vc_text && !openGit &&
<img src={summaryIcon} /> <div className='summary__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
<h3>Данные и резюме</h3> </div>
}
{openGit &&
<div className='summary__sectionGit'>
<div className='summary__sections__head'>
<h3>Страница портфолио кода разработчика</h3>
<button>Редактировать раздел</button>
</div> </div>
<div className='item__info'> <div className='summary__sectionGitItems'>
<p>Ваше резюме<br/><span>заполнено</span></p> {gitInfo.length && gitInfo.map((itemGit) => {
<div className='item__infoLink'> return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
<img src={rightArrow} /> <div className='gitItem__info'>
</div> <div className='gitItem__info__about'>
<img src={gitImgItem} alt='gitImg' />
<div className='gitItem__info__name'>
<h4>{itemGit.title}</h4>
<p>{itemGit.description}</p>
</div>
</div>
<div className='gitItem__info__specification'>
<span></span>
<p>{itemGit.main_stack}</p>
</div>
</div>
<a className='gitItem__link' href={itemGit.link} target="_blank">
<img src={rightArrow} alt='arrowRight' />
</a>
</div>
})
}
</div> </div>
</NavLink> </div>
<NavLink to={'/profile'} className='item'> }
<div className='item__about'>
<img src={timerIcon} />
<h3>Трекер времени</h3>
</div>
<div className='item__info'>
<p>Сколько времени занимает<br/> выполнение задач</p>
<div className='item__infoLink'>
<img src={rightArrow} />
</div>
</div>
</NavLink>
<NavLink to={'/profile'} className='item'>
<div className='item__about'>
<img src={paymentIcon} />
<h3>Выплаты</h3>
</div>
<div className='item__info'>
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
<div className='item__infoLink'>
<img src={rightArrow} />
</div>
</div>
</NavLink>
<NavLink to={'/profile'} className='item'>
<div className='item__about'>
<img src={settingIcon} />
<h3>Настройки аккаунта</h3>
</div>
<div className='item__info'>
<p>Перейдите чтобы начать<br/> редактирование</p>
<div className='item__infoLink'>
<img src={rightArrow} />
</div>
</div>
</NavLink>
</div>
</div> </div>
<Footer/> <Footer/>
</div> </div>
) )
} }