apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

partner catalog and no requests block

Browse Source
This commit is contained in:
Николай Полтщук
2023-03-27 16:03:24 +03:00
parent d07b9473c4
commit 5f4dc3a5f2
11 changed files with 278 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/pages/PartnerRequests/PartnerRequests.js
View File

@ -3,8 +3,11 @@ import {Link, Navigate} from "react-router-dom";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {SliderWorkers} from "../../components/SliderWorkers/SliderWorkers"
import {Footer} from "../../components/Footer/Footer";
import cursorImg from "../../images/cursorImg.png"
import './partnerRequests.scss'
export const PartnerRequests = () => {
@ -39,33 +42,59 @@ export const PartnerRequests = () => {
]}
/>
<h2 className='partnerRequests__title'>Запросы</h2>
<div className='partnerRequests__section'>
<div className='partnerRequests__section__items'>
{
items.map((item, index) => {
return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item'>
<p className='partnerRequests__section__item__name'>
{item.name}
</p>
<p className='partnerRequests__section__item__count'>
Подходящие кандидаты<span>{item.count}</span>
</p>
</Link>
})
}
{Boolean(items.length) ?
<div className='partnerRequests__section'>
<div className='partnerRequests__section__items'>
{
items.map((item, index) => {
return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item'>
<p className='partnerRequests__section__item__name'>
{item.name}
</p>
<p className='partnerRequests__section__item__count'>
Подходящие кандидаты<span>{item.count}</span>
</p>
</Link>
})
}
</div>
<div className='partnerRequests__section__info'>
<h3>Инструкция: подачи заявки</h3>
<p>
Оператор компании заводит заявку и указывает необходимые параметры —
количество сотрудников, стек, уровень специалиста
</p>
<Link to={'/profile/add-request'}>
<span>+</span>
Создать запрос
</Link>
</div>
</div>
<div className='partnerRequests__section__info'>
<h3>Инструкция: подачи заявки</h3>
<p>
Оператор компании заводит заявку и указывает необходимые параметры —
количество сотрудников, стек, уровень специалиста
</p>
<Link to={'/profile/add-request'}>
<span>+</span>
Создать запрос
</Link>
:
<div className="partnerRequests__noItems">
<div className="partnerRequests__noItems__create">
<div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p>
<Link to={'/profile/add-request'}>
<span>+</span>
Создать запрос
</Link>
</div>
<div className="partnerRequests__noItems__create__instruction">
<h3>Инструкция: подачи заявки</h3>
<p>
Оператор компании заводит заявку и указывает необходимые параметры —
количество сотрудников, стек, уровень специалиста
</p>
</div>
</div>
<div className="partnerRequests__noItems__freeEmployees">
<SliderWorkers title={"Свободные разработчики"} titleInfo={"в нашей базе"} />
<p>Перейти в полный <Link to={'/profile/catalog'}>КАТАЛОГ</Link> сотрудников</p>
</div>
</div>
</div>
}
</div>
<Footer/>
</div>

165
src/pages/PartnerRequests/partnerRequests.scss
View File

@ -193,6 +193,171 @@
}
}
&__noItems {
display: flex;
flex-direction: column;
&__create {
background: #FFFFFF;
border-radius: 12px;
padding: 29px 33px 23px 36px;
display: flex;
margin-top: 40px;
align-items: center;
@media (max-width: 1140px) {
flex-direction: column;
row-gap: 25px;
}
@media (max-width: 670px) {
padding: 15px 15px;
}
&__link {
display: flex;
background: #F1F1F1;
border-radius: 12px;
padding: 11px 25px 12px 30px;
align-items: center;
width: 100%;
min-width: 650px;
justify-content: space-between;
max-height: 70px;
@media (max-width: 720px) {
min-width: auto;
}
@media (max-width: 670px) {
max-height: inherit;
flex-direction: column;
row-gap: 8px;
width: auto;
img {
margin-right: 5px;
}
}
@media (max-width: 480px) {
padding: 10px 15px;
}
p {
font-weight: 700;
font-size: 16px;
line-height: 32px;
color: #111112;
margin-bottom: 0;
@media (max-width: 480px) {
font-size: 14px;
}
@media (max-width: 380px) {
font-size: 12px;
}
}
a {
background: #52B709;
max-width: 174px;
border-radius: 44px;
width: 100%;
height: 46px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s all ease;
span {
color: white;
font-weight: 700;
font-size: 20px;
margin-right: 8px;
}
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
text-decoration: none;
color: #FFFFFF;
}
}
}
&__instruction {
margin-left: 45px;
@media (max-width: 1140px) {
margin-left: 0;
}
h3 {
color: #52B709;
font-weight: 700;
font-size: 15px;
line-height: 15px;
margin-bottom: 7px;
@media (max-width: 1140px) {
text-align: center;
font-size: 22px;
margin-bottom: 15px;
}
@media (max-width: 530px) {
font-size: 16px;
}
}
p {
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: #000000;
margin-bottom: 0;
@media (max-width: 1140px) {
text-align: center;
font-size: 16px;
}
@media (max-width: 530px) {
font-size: 14px;
}
}
}
}
&__freeEmployees {
h2 {
font-weight: 500;
font-size: 30px;
line-height: 32px;
}
p {
margin-top: 70px;
width: 100%;
font-weight: 700;
font-size: 16px;
line-height: 32px;
color: #111112;
text-align: center;
a {
color: #0C7636;
}
}
}
}
footer {
margin-top: 70px;
}