catalogSpecialists
This commit is contained in:
Mikola
parent
03bf3f2085
commit
3765f96c56
@ -9,6 +9,7 @@ import {
|
||||
import { getNotification } from "@redux/outstaffingSlice";
|
||||
|
||||
import Auth from "./pages/Auth/Auth";
|
||||
import CatalogSpecialists from "@pages/CatalogSpecialists/CatalogSpecialists";
|
||||
import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
|
||||
import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
|
||||
import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
|
||||
@ -66,6 +67,7 @@ const App = () => {
|
||||
<Route exact path="/tracker-registration" element={<TrackerRegistration />} />
|
||||
<Route exact path="/company" element={<CompanyInfo />} />
|
||||
<Route exact path="/registration-setting" element={<RegistrationSetting />} />
|
||||
<Route exact path="/catalog-specialists" element={<CatalogSpecialists />} />
|
||||
|
||||
<Route exact path="/worker/:id" element={<FreeDevelopers />} />
|
||||
<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