guild_front/src/pages/OpenRequests/OpenRequest.jsx

import React, { useState } from "react";

import { Footer } from "@components/Common/Footer/Footer";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import { VacancyTab } from "@components/VacancyTab/VacancyTab";
import { VacancyItem } from "@components/VacancyItem/VacancyItem";

import "./OpenRequest.scss";

export const OpenRequest = () => {
  const vacancy = [
    {
      name: 'Frontend',
      count: 15,
      items: [
        {
          name: 'Laravel Middle+/Senior 1',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 2',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 3',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 4',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 5',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 6',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        }
      ]
    },
    {
      name: 'Backend',
      count: 8,
      items: [
        {
          name: 'Laravel Middle+/Senior 7',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 8',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        }
      ]
    },
    {
      name: 'Дизайн',
      count: 0,
      items: [
        {
          name: 'Laravel Middle+/Senior 9',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 10',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        }
      ]
    },
    {
      name: 'Аналитика',
      count: 0,
      items: [
        {
          name: 'Laravel Middle+/Senior 11',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 12',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 13',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        }
      ]
    },
    {
      name: 'Тестирование',
      count: 0,
      items: [
        {
          name: 'Laravel Middle+/Senior 14',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 15',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior 16',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        },
        {
          name: 'Laravel Middle+/Senior',
          description: 'Проект представляет из себя монолит с большим техдолгом, нужен php разработчик с опытом распила монолита на модули/микросервисы',
          level: 'Middle+/Senior',
          location: 'РФ, РБ',
          price: '1500 руб. час',
          count: '1 сотрудник'
        }
      ]
    }
  ]

  const [activeTab, setActiveTab] = useState('Frontend')
  return (
    <div className="open-request">
      <ProfileHeader />
      <Navigation />
      <div className="container">
        <div className="open-request-content">
          <ProfileBreadcrumbs
            links={[
              { name: "Главная", link: "/profile" },
              {
                name: "Работа в IT открытые запросы",
                link: "/profile/open-requests"
              }
            ]}
          />
          <h2 className="summary__title">Работа в IT открытые запросы</h2>
          <div className="vacancy__tabs">
            {vacancy.map((item, index) => {
              return <VacancyTab title={item.name} count={item.count} active={activeTab}
                                 setActive={() => setActiveTab(item.name)} key={index} />
            })
            }
          </div>
          <div className="vacancy__items">
            {vacancy.map((item) => {
              if (item.name === activeTab) {
                return item.items.map((vacancy, index) => {
                  return <VacancyItem key={index} vacancy={vacancy}/>
                });
              }
              return null
            })}
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};