211 lines
8.2 KiB
JavaScript
211 lines
8.2 KiB
JavaScript
import React, { useState } from "react";
|
||
|
||
import CatalogPersonCard from "@components/CatalogPersonCard/CatalogPersonCard";
|
||
import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
|
||
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
|
||
import { Footer } from "@components/Common/Footer/Footer";
|
||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||
import SideBar from "@components/SideBar/SideBar";
|
||
|
||
import mockWorker from "assets/images/mock/mokPerson.png";
|
||
import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
|
||
import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
|
||
import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
|
||
import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
|
||
import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
|
||
import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
|
||
import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
|
||
import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
||
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.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;
|