guild_front/src/pages/CatalogSpecialists/CatalogSpecialists.jsx
2024-01-29 21:19:39 +03:00

211 lines
8.2 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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;