partner employees

src/pages/PartnerСategories/PartnerСategories.js

@@ -0,0 +1,169 @@
+import React, {useState} from 'react';
+import {Link} from "react-router-dom";
+import {Navigate} from "react-router-dom";
+import {useDispatch} from "react-redux";
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
+import {Footer} from "../../components/Footer/Footer";
+
+import {setPartnerEmployees} from "../../redux/outstaffingSlice";
+
+import BackEndImg from "./images/personalBackEnd.png"
+import FrontendImg from "./images/PersonalFrontend.png"
+import ArchitectureImg from "./images/PersonalArchitecture.png"
+import DesignImg from "./images/PersonalDesign.png"
+import TestImg from "./images/PersonalTesters.png"
+import AdminImg from "./images/PersonalAdmin.png"
+import ManageImg from "./images/PersonalMng.png"
+import CopyImg from "./images/PersonalCopy.png"
+import SmmImg from "./images/PersonalSMM.png"
+import rightArrow from "../../images/arrowRight.png"
+import avatarImg from "../PartnerEmployees/avatarMok.png";
+
+import "./partnerСategories.scss"
+
+export const PartnerCategories = () => {
+    const dispatch = useDispatch();
+    if(localStorage.getItem('role_status') !== '18') {
+        return <Navigate to="/profile" replace/>
+    }
+
+    const [personalInfoItems] = useState([
+        {
+            title: 'Backend разработчики',
+            link: '/profile/categories/employees',
+            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+            available: true,
+            img: BackEndImg
+        },
+        {
+            title: 'Frontend разработчики',
+            link: '/profile/categories/employees',
+            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+            available: true,
+            img: FrontendImg
+        },
+        {
+            title: 'Архитектура проектов',
+            link: '/profile/categories/employees',
+            description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
+            available: true,
+            img: ArchitectureImg
+        },
+        {
+            title: 'Дизайн проектов',
+            link: '/profile/categories/employees',
+            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+            available: true,
+            img: DesignImg
+        },
+        {
+            title: 'Тестирование проектов',
+            link: '/profile/add-request',
+            description: 'SQL Postman TestRail Kibana Ручное тестирование',
+            available: false,
+            img: TestImg
+        },
+        {
+            title: 'Администрирование проектов',
+            link: '/profile/add-request',
+            description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
+            available: false,
+            img: AdminImg
+        },
+        {
+            title: 'Управление проектом',
+            link: '/profile/add-request',
+            description: 'Scrum Kanban Agile Miro CustDev',
+            available: false,
+            img: ManageImg
+        },
+        {
+            title: 'Копирайтинг проектов',
+            link: '/profile/add-request',
+            description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
+            available: false,
+            img: CopyImg
+        },
+        {
+            title: 'Реклама и SMM',
+            link: '/profile/add-request',
+            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+            available: false,
+            img: SmmImg
+        },
+    ])
+
+    const [mokPersons] = useState([
+        {
+            personAvatar: avatarImg,
+            name: "Макаренко Дмитрий",
+            qualification: "PHP Backend - разработчик",
+            level: "Middle",
+            project: "Админка НВД Консалтинг",
+            tasks_in_progress: 5,
+            month_hours: 140,
+            id: 1
+        },
+        {
+            personAvatar: avatarImg,
+            name: "Макаренко Дмитрий",
+            qualification: "PHP Backend - разработчик",
+            level: "Middle",
+            project: "Админка НВД Консалтинг",
+            tasks_in_progress: 5,
+            month_hours: 140,
+            id: 2
+        },
+        {
+            personAvatar: avatarImg,
+            name: "Макаренко Дмитрий",
+            qualification: "PHP Backend - разработчик",
+            level: "Middle",
+            project: "Админка НВД Консалтинг",
+            tasks_in_progress: 5,
+            month_hours: 140,
+            id: 3
+        },
+    ])
+    return (
+        <div className="partnerCategories">
+            <ProfileHeader />
+            <div className="container">
+                <ProfileBreadcrumbs links={[
+                    {name: 'Главная', link: '/profile'},
+                    {name: 'Данные моего персонала', link: '/profile/categories'},
+                ]}
+                />
+                <h2 className="partnerCategories__title">Данные персонала</h2>
+                <div className="partnerCategories__items">
+                    {personalInfoItems.map((item, index) => {
+                        return <Link to={item.link} key={index} className={item.available ? "partnerCategories__item item" : "partnerCategories__item item item__disable"}
+                                     onClick={() => {
+                                        dispatch(setPartnerEmployees(mokPersons))
+                        }}>
+                            <div className="item__title">
+                                <img src={item.img} alt={item.title} />
+                                <h4>{item.title}</h4>
+                            </div>
+                            <div className="item__info">
+                                <p>{item.description}</p>
+                                <div className='more'>
+                                    <img src={rightArrow} alt="arrow" />
+                                </div>
+                            </div>
+                            {!item.available &&
+                                <div className="item__disableHover">
+                                    <p>У вас нет персонала из категории</p>
+                                    <button>Подобрать</button>
+                                </div>
+                            }
+                        </Link>
+                    })}
+                </div>
+            </div>
+            <Footer/>
+        </div>
+    )
+}

src/pages/PartnerСategories/partnerСategories.scss

@@ -0,0 +1,156 @@
+.partnerCategories {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
+
+  &__title {
+    color: #000000;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 22px;
+  }
+
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 25px;
+    row-gap: 24px;
+    column-gap: 21px;
+  }
+
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    padding: 33px 32px 25px 28px;
+    width: 32%;
+    background: #FFFFFF;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    position: relative;
+
+    @media (max-width: 1098px) {
+      width: 48%;
+    }
+
+    @media (max-width: 650px) {
+      width: 100%;
+    }
+
+    &:hover {
+      box-shadow: 6px 5px 20px rgba(87, 98, 80, 0.21);
+      transform: scale(1.02);
+      text-decoration: none;
+    }
+
+    &__disable {
+      opacity: 0.5;
+
+      &:hover {
+        box-shadow: none;
+        transform: none;
+        opacity: 1;
+        background: #f8f8f8;
+
+        .item__info {
+          opacity: 0;
+        }
+
+        .item__disableHover {
+          opacity: 1;
+        }
+      }
+
+      &Hover {
+        position: absolute;
+        display: flex;
+        left: 0;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 13px 16px 21px;
+        border: 3px solid #52B709;
+        bottom: 0;
+        border-radius: 12px;
+        opacity: 0;
+        transition: all 0.5s ease;
+
+        p {
+          color: #000000;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 18px;
+          max-width: 140px;
+          margin-bottom: 0;
+        }
+
+        button {
+          width: 140px;
+          height: 50px;
+          border: none;
+          background: #52B709;
+          border-radius: 44px;
+          font-weight: 500;
+          font-size: 15px;
+          line-height: 32px;
+          color: #FFFFFF;
+        }
+      }
+    }
+
+    &__title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 27px;
+
+      h4 {
+        color: #000000;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 22px;
+        margin-left: 18px;
+        max-width: 190px;
+        margin-bottom: 0;
+      }
+    }
+
+    &__info {
+      display: flex;
+      justify-content: space-between;
+
+      p {
+        max-width: 181px;
+        margin-bottom: 0;
+        color: #6F6F6F;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+      }
+
+      .more {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        background: #DDEEC6;
+        border-radius: 50px;
+      }
+    }
+  }
+
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  footer {
+    margin-top: 70px;
+  }
+}