guild_front/src/pages/CatalogSpecialists/CatalogSpecialists.jsx

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;