catalogSpecialists
This commit is contained in:
Mikola
parent
03bf3f2085
commit
3765f96c56
@ -9,6 +9,7 @@ import {
|
|||||||
import { getNotification } from "@redux/outstaffingSlice";
|
import { getNotification } from "@redux/outstaffingSlice";
|
||||||
|
|
||||||
import Auth from "./pages/Auth/Auth";
|
import Auth from "./pages/Auth/Auth";
|
||||||
|
import CatalogSpecialists from "@pages/CatalogSpecialists/CatalogSpecialists";
|
||||||
import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
|
import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
|
||||||
import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
|
import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
|
||||||
import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
|
import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
|
||||||
@ -66,6 +67,7 @@ const App = () => {
|
|||||||
<Route exact path="/tracker-registration" element={<TrackerRegistration />} />
|
<Route exact path="/tracker-registration" element={<TrackerRegistration />} />
|
||||||
<Route exact path="/company" element={<CompanyInfo />} />
|
<Route exact path="/company" element={<CompanyInfo />} />
|
||||||
<Route exact path="/registration-setting" element={<RegistrationSetting />} />
|
<Route exact path="/registration-setting" element={<RegistrationSetting />} />
|
||||||
|
<Route exact path="/catalog-specialists" element={<CatalogSpecialists />} />
|
||||||
|
|
||||||
<Route exact path="/worker/:id" element={<FreeDevelopers />} />
|
<Route exact path="/worker/:id" element={<FreeDevelopers />} />
|
||||||
<Route
|
<Route
|
||||||
|
|||||||
33
src/components/CatalogPersonCard/CatalogPersonCard.jsx
Normal file
33
src/components/CatalogPersonCard/CatalogPersonCard.jsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import "./catalogPersonCard.scss";
|
||||||
|
|
||||||
|
export const CatalogPersonCard = ({ img, name, salary, category, skills, level, description }) => {
|
||||||
|
return (
|
||||||
|
<div className="catalogPersonCard">
|
||||||
|
<div className="catalogPersonCard__head">
|
||||||
|
<div className="catalogPersonCard__avatar">
|
||||||
|
<img src={img} alt="avatar" />
|
||||||
|
<span className="catalogPersonCard__skill">{level}</span>
|
||||||
|
</div>
|
||||||
|
<div className="catalogPersonCard__info">
|
||||||
|
<span className="catalogPersonCard__name">{name}</span>
|
||||||
|
<span className="catalogPersonCard__salary">{salary} / час</span>
|
||||||
|
<p className="catalogPersonCard__category"><span>Разработка:</span> {category}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="catalogPersonCard__items">
|
||||||
|
{skills.map((item, index) => {
|
||||||
|
return <div className="catalogPersonCard__skillItem" key={index}>
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<p className="catalogPersonCard__description">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CatalogPersonCard;
|
||||||
98
src/components/CatalogPersonCard/catalogPersonCard.scss
Normal file
98
src/components/CatalogPersonCard/catalogPersonCard.scss
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
.catalogPersonCard {
|
||||||
|
background: #FFFFFF;
|
||||||
|
padding: 29px 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 340px;
|
||||||
|
|
||||||
|
&__head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
img {
|
||||||
|
width: 83px;
|
||||||
|
height: 83px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__skill {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10px;
|
||||||
|
padding: 3.5px 19px;
|
||||||
|
border-radius: 44px;
|
||||||
|
background: #1458DD;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 13.5px;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__salary {
|
||||||
|
color: #1458DD;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__category {
|
||||||
|
span {
|
||||||
|
color: #6F6F6F;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
color: #263238;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__items {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 5.5px;
|
||||||
|
row-gap: 16px;
|
||||||
|
margin-top: 22px;
|
||||||
|
padding-bottom: 17px;
|
||||||
|
border-bottom: 0.5px solid #B3DF93;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__skillItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6F6F6F;
|
||||||
|
width: 62px;
|
||||||
|
height: 26px;
|
||||||
|
border: 0.5px solid #8DC63F;
|
||||||
|
border-radius: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description {
|
||||||
|
margin-top: 17px;
|
||||||
|
max-width: 245px;
|
||||||
|
color: #6F6F6F;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
200
src/pages/CatalogSpecialists/CatalogSpecialists.jsx
Normal file
200
src/pages/CatalogSpecialists/CatalogSpecialists.jsx
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
|
||||||
|
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
|
||||||
|
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||||
|
import { Footer } from "@components/Common/Footer/Footer";
|
||||||
|
import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
|
||||||
|
import CatalogPersonCard from "@components/CatalogPersonCard/CatalogPersonCard";
|
||||||
|
import SideBar from "@components/SideBar/SideBar";
|
||||||
|
|
||||||
|
import mockWorker from "assets/images/mock/mokPerson.png";
|
||||||
|
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||||||
|
import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
|
||||||
|
import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
|
||||||
|
import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
|
||||||
|
import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
||||||
|
import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
|
||||||
|
import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
|
||||||
|
import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
|
||||||
|
import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
|
||||||
|
|
||||||
|
import "./catalogSpecialists.scss";
|
||||||
|
|
||||||
|
const CatalogSpecialists = () => {
|
||||||
|
const [personalInfoItems] = useState([
|
||||||
|
{
|
||||||
|
title: "Backend разработчики",
|
||||||
|
description:
|
||||||
|
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||||
|
available: true,
|
||||||
|
img: BackEndImg
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Frontend разработчики",
|
||||||
|
description:
|
||||||
|
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||||
|
available: true,
|
||||||
|
img: FrontendImg
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Архитектура проектов",
|
||||||
|
description: "Потоки данных ER ERP CRM CQRS UML BPMN",
|
||||||
|
available: true,
|
||||||
|
img: ArchitectureImg
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Дизайн проектов",
|
||||||
|
description:
|
||||||
|
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||||
|
available: true,
|
||||||
|
img: DesignImg
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Тестирование проектов",
|
||||||
|
description: "SQL Postman TestRail Kibana Ручное тестирование",
|
||||||
|
available: true,
|
||||||
|
img: TestImg
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Администрирование проектов",
|
||||||
|
description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
|
||||||
|
available: true,
|
||||||
|
img: AdminImg
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Управление проектом",
|
||||||
|
description: "Scrum Kanban Agile Miro CustDev",
|
||||||
|
available: true,
|
||||||
|
img: ManageImg
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Копирайтинг проектов",
|
||||||
|
description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
|
||||||
|
available: true,
|
||||||
|
img: CopyImg
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Реклама и SMM",
|
||||||
|
description:
|
||||||
|
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||||
|
available: true,
|
||||||
|
img: SmmImg
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const mockPersons = [
|
||||||
|
{
|
||||||
|
name: "Виталий Д.",
|
||||||
|
img: mockWorker,
|
||||||
|
salary: "1 500 Р",
|
||||||
|
category: "Front End",
|
||||||
|
level: "Middle+",
|
||||||
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
|
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Виталий Д.",
|
||||||
|
img: mockWorker,
|
||||||
|
salary: "1 500 Р",
|
||||||
|
category: "Front End",
|
||||||
|
level: "Middle+",
|
||||||
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
|
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Виталий Д.",
|
||||||
|
img: mockWorker,
|
||||||
|
salary: "1 500 Р",
|
||||||
|
category: "Front End",
|
||||||
|
level: "Middle+",
|
||||||
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
|
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Виталий Д.",
|
||||||
|
img: mockWorker,
|
||||||
|
salary: "1 500 Р",
|
||||||
|
category: "Front End",
|
||||||
|
level: "Middle+",
|
||||||
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
|
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Виталий Д.",
|
||||||
|
img: mockWorker,
|
||||||
|
salary: "1 500 Р",
|
||||||
|
category: "Front End",
|
||||||
|
level: "Middle+",
|
||||||
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
|
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Виталий Д.",
|
||||||
|
img: mockWorker,
|
||||||
|
salary: "1 500 Р",
|
||||||
|
category: "Front End",
|
||||||
|
level: "Middle+",
|
||||||
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
|
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
return (
|
||||||
|
<section className="catalogSpecialists">
|
||||||
|
<AuthHeader />
|
||||||
|
<div className="container catalogSpecialists__wrapper">
|
||||||
|
<ProfileBreadcrumbs
|
||||||
|
links={[
|
||||||
|
{ name: "Главная", link: "/auth" },
|
||||||
|
{ name: "Свободные разработчики", link: "/" }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<div className="catalogSpecialists__head">
|
||||||
|
<h2>Каталог специалистов</h2>
|
||||||
|
<div className="catalogSpecialists__count countInfo">
|
||||||
|
<div className="countInfo__imgWrapper">
|
||||||
|
<img src={mockWorker} alt="worker" />
|
||||||
|
</div>
|
||||||
|
<p>🖐 50+ специалистов доступны</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="catalogSpecialists__items">
|
||||||
|
{personalInfoItems.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<CategoriesItem
|
||||||
|
link={item.link}
|
||||||
|
key={index}
|
||||||
|
title={item.title}
|
||||||
|
img={item.img}
|
||||||
|
skills={item.description}
|
||||||
|
available={item.available}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<h3 className="catalogSpecialists__searchTitle">Найти специалиста по навыкам</h3>
|
||||||
|
<div className="catalogSpecialists__searchBlock">
|
||||||
|
<input type="text" />
|
||||||
|
<button>Поиск</button>
|
||||||
|
</div>
|
||||||
|
<div className="catalogSpecialists__employees">
|
||||||
|
{mockPersons.map((person, index) => {
|
||||||
|
return <CatalogPersonCard
|
||||||
|
name={person.name}
|
||||||
|
img={person.img}
|
||||||
|
salary={person.salary}
|
||||||
|
category={person.category}
|
||||||
|
level={person.level}
|
||||||
|
skills={person.skills}
|
||||||
|
description={person.description}
|
||||||
|
key={index}
|
||||||
|
/>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
<SideBar />
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CatalogSpecialists;
|
||||||
109
src/pages/CatalogSpecialists/catalogSpecialists.scss
Normal file
109
src/pages/CatalogSpecialists/catalogSpecialists.scss
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
.catalogSpecialists {
|
||||||
|
background: #f1f1f1;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: "LabGrotesque", sans-serif;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
padding-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 23px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__count {
|
||||||
|
border-radius: 38px;
|
||||||
|
border: 1px solid #E3E3E9;
|
||||||
|
padding: 6px 32px 6px 6px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 450px;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #777989;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.countInfo {
|
||||||
|
&__imgWrapper {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 60px;
|
||||||
|
border: 3px solid white;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 43px;
|
||||||
|
height: 43px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__items {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 40px;
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 24px;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
margin-bottom: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__searchTitle {
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__searchBlock {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 39px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 0.5px solid #B0BABF;
|
||||||
|
background: #F4F4F4;
|
||||||
|
outline: none;
|
||||||
|
height: 50px;
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 9px 36px;
|
||||||
|
border-radius: 44px;
|
||||||
|
border: none;
|
||||||
|
background-color: #52B709;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__employees {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
column-gap: 10px;
|
||||||
|
row-gap: 25px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user