profilePage
This commit is contained in:
parent
3238bf221c
commit
731244905f
@ -20,6 +20,7 @@ import { QuizTestPage } from './pages/quiz/QuizTestPage'
|
||||
import { InstructionPage } from './pages/quiz/InstructionPage'
|
||||
import { ResultPage } from './pages/quiz/ResultPage'
|
||||
import { Profile } from './pages/Profile.js'
|
||||
import { Summary } from './pages/Summary'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
@ -59,6 +60,7 @@ const App = () => {
|
||||
component={InstructionPage}
|
||||
/>
|
||||
<ProtectedRoute path='/profile' component={Profile} />
|
||||
<ProtectedRoute path='/summary' component={Summary} />
|
||||
<ProtectedRoute path='/quiz-result' component={ResultPage} />
|
||||
<ProtectedRoute component={() => <div>Page not found</div>} />
|
||||
</Switch>
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
&__container {
|
||||
max-width: 1160px;
|
||||
padding: 0 10px;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
//
|
||||
//&__container {
|
||||
// max-width: 1160px;
|
||||
// padding: 0 10px;
|
||||
// margin: 20px auto;
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
//}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
@ -363,9 +363,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
margin-top: 70px;
|
||||
margin-top: 23px;
|
||||
|
||||
@media (max-width: 570px) {
|
||||
margin-top: 0;
|
||||
|
||||
114
src/components/Profile/summary.scss
Normal file
114
src/components/Profile/summary.scss
Normal file
@ -0,0 +1,114 @@
|
||||
.summary {
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
span {
|
||||
color: #52B709;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
min-height: 128px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 130px 0 45px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 30px;
|
||||
row-gap: 25px;
|
||||
column-gap: 35px;
|
||||
|
||||
@media (max-width: 1175px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (max-width: 925px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__about {
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
h3 {
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
max-width: 125px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #000000;
|
||||
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 {
|
||||
max-width: 1160px;
|
||||
margin-top: 23px;
|
||||
|
||||
@media (max-width: 570px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
BIN
src/images/paymentIcon.png
Normal file
BIN
src/images/paymentIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 966 B |
BIN
src/images/reports.png
Normal file
BIN
src/images/reports.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 845 B |
BIN
src/images/settingIcon.png
Normal file
BIN
src/images/settingIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 836 B |
BIN
src/images/summaryIcon.png
Normal file
BIN
src/images/summaryIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/images/timerIcon.png
Normal file
BIN
src/images/timerIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -26,7 +26,7 @@ export const Profile = () => {
|
||||
return(
|
||||
<div className='profile'>
|
||||
<ProfileHeader/>
|
||||
<div className='profile__container'>
|
||||
<div className='container'>
|
||||
<div className='profile__content'>
|
||||
<h2 className='profile__title'>Ваше резюме {openGit && <span>- Git</span>}</h2>
|
||||
{openGit && <div className='profile__back' onClick={() => setOpenGit(false)}>
|
||||
|
||||
96
src/pages/Summary.js
Normal file
96
src/pages/Summary.js
Normal file
@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
import {useSelector} from "react-redux";
|
||||
import {getProfileInfo} from "../redux/outstaffingSlice";
|
||||
import {ProfileHeader} from "../components/Profile/ProfileHeader";
|
||||
import {NavLink} from "react-router-dom";
|
||||
import {Footer} from "../components/Footer/Footer";
|
||||
|
||||
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 './../components/Profile/summary.scss'
|
||||
|
||||
export const Summary = () => {
|
||||
const profileInfo = useSelector(getProfileInfo)
|
||||
return(
|
||||
<div className='summary'>
|
||||
<ProfileHeader/>
|
||||
<div className='container'>
|
||||
<h2 className='summary__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
|
||||
<div className='summary__info'>
|
||||
<div className='profile__person'>
|
||||
<img src={profileInfo.photo} className='profile__avatar' />
|
||||
<p className='profile__name'>{profileInfo.fio} {profileInfo.specification}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='summary__items'>
|
||||
<NavLink to={'/profile'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={reportsIcon} />
|
||||
<h3>Ваша отчетность</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} />
|
||||
</div>
|
||||
</div>
|
||||
</NavLink>
|
||||
<NavLink to={'/profile'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={summaryIcon} />
|
||||
<h3>Данные и резюме</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p>Ваше резюме<br/><span>заполнено</span></p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} />
|
||||
</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>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user