From 3765f96c56cb3648946d73acec6fec37892d269f Mon Sep 17 00:00:00 2001 From: Mikola Date: Mon, 29 Jan 2024 21:19:20 +0300 Subject: [PATCH 1/3] catalogSpecialists --- src/App.js | 2 + .../CatalogPersonCard/CatalogPersonCard.jsx | 33 +++ .../CatalogPersonCard/catalogPersonCard.scss | 98 +++++++++ .../CatalogSpecialists/CatalogSpecialists.jsx | 200 ++++++++++++++++++ .../catalogSpecialists.scss | 109 ++++++++++ 5 files changed, 442 insertions(+) create mode 100644 src/components/CatalogPersonCard/CatalogPersonCard.jsx create mode 100644 src/components/CatalogPersonCard/catalogPersonCard.scss create mode 100644 src/pages/CatalogSpecialists/CatalogSpecialists.jsx create mode 100644 src/pages/CatalogSpecialists/catalogSpecialists.scss diff --git a/src/App.js b/src/App.js index 0470c964..e7bdf589 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ import { import { getNotification } from "@redux/outstaffingSlice"; import Auth from "./pages/Auth/Auth"; +import CatalogSpecialists from "@pages/CatalogSpecialists/CatalogSpecialists"; import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro" import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo"; import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth"; @@ -66,6 +67,7 @@ const App = () => { } /> } /> } /> + } /> } /> { + return ( +
+
+
+ avatar + {level} +
+
+ {name} + {salary} / час +

Разработка: {category}

+
+
+
+ {skills.map((item, index) => { + return
+ {item} +
+ })} +
+

+ {description} +

+
+ ); +}; + +export default CatalogPersonCard; diff --git a/src/components/CatalogPersonCard/catalogPersonCard.scss b/src/components/CatalogPersonCard/catalogPersonCard.scss new file mode 100644 index 00000000..4a8e2e7e --- /dev/null +++ b/src/components/CatalogPersonCard/catalogPersonCard.scss @@ -0,0 +1,98 @@ +.catalogPersonCard { + background: #FFFFFF; + padding: 29px 32px; + border-radius: 8px; + display: flex; + flex-direction: column; + max-width: 340px; + + &__head { + display: flex; + align-items: center; + } + + &__avatar { + position: relative; + display: flex; + flex-direction: column; + img { + width: 83px; + height: 83px; + } + } + + &__skill { + position: absolute; + bottom: -10px; + padding: 3.5px 19px; + border-radius: 44px; + background: #1458DD; + color: white; + font-size: 14px; + } + + &__info { + display: flex; + margin-left: 13.5px; + flex-direction: column; + row-gap: 15px; + } + + &__name { + font-size: 20px; + line-height: 22px; + color: #000000; + font-weight: 700; + } + + &__salary { + color: #1458DD; + font-weight: 700; + font-size: 18px; + line-height: 22px; + } + + &__category { + span { + color: #6F6F6F; + font-size: 12px; + line-height: 18px; + font-weight: 400; + } + + color: #263238; + font-size: 16px; + line-height: 22px; + font-weight: 500; + } + + &__items { + display: flex; + flex-wrap: wrap; + column-gap: 5.5px; + row-gap: 16px; + margin-top: 22px; + padding-bottom: 17px; + border-bottom: 0.5px solid #B3DF93; + } + + &__skillItem { + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + color: #6F6F6F; + width: 62px; + height: 26px; + border: 0.5px solid #8DC63F; + border-radius: 44px; + } + + &__description { + margin-top: 17px; + max-width: 245px; + color: #6F6F6F; + font-size: 12px; + line-height: 18px; + } +} diff --git a/src/pages/CatalogSpecialists/CatalogSpecialists.jsx b/src/pages/CatalogSpecialists/CatalogSpecialists.jsx new file mode 100644 index 00000000..eb67ac65 --- /dev/null +++ b/src/pages/CatalogSpecialists/CatalogSpecialists.jsx @@ -0,0 +1,200 @@ +import React, { useState } from "react"; + +import AuthHeader from "@components/Common/AuthHeader/AuthHeader"; +import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; +import { Footer } from "@components/Common/Footer/Footer"; +import CategoriesItem from "@components/CategoriesItem/CategoriesItem"; +import CatalogPersonCard from "@components/CatalogPersonCard/CatalogPersonCard"; +import SideBar from "@components/SideBar/SideBar"; + +import mockWorker from "assets/images/mock/mokPerson.png"; +import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg"; +import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg"; +import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg"; +import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg"; +import TestImg from "assets/images/partnerProfile/PersonalTesters.svg"; +import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg"; +import ManageImg from "assets/images/partnerProfile/PersonalMng.svg"; +import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg"; +import SmmImg from "assets/images/partnerProfile/PersonalSMM.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 ( +
+ +
+ +
+

Каталог специалистов

+
+
+ worker +
+

🖐 50+ специалистов доступны

+
+
+
+ {personalInfoItems.map((item, index) => { + return ( + + ); + })} +
+

Найти специалиста по навыкам

+
+ + +
+
+ {mockPersons.map((person, index) => { + return + })} +
+
+
+ +
+ ); +}; + +export default CatalogSpecialists; diff --git a/src/pages/CatalogSpecialists/catalogSpecialists.scss b/src/pages/CatalogSpecialists/catalogSpecialists.scss new file mode 100644 index 00000000..893428f1 --- /dev/null +++ b/src/pages/CatalogSpecialists/catalogSpecialists.scss @@ -0,0 +1,109 @@ +.catalogSpecialists { + background: #f1f1f1; + height: 100%; + min-height: 100vh; + font-family: "LabGrotesque", sans-serif; + + &__wrapper { + padding-top: 24px; + } + + &__head { + display: flex; + justify-content: space-between; + margin-top: 23px; + align-items: center; + + h2 { + font-size: 30px; + line-height: 32px; + margin-bottom: 0; + color: #000000; + } + } + + &__count { + border-radius: 38px; + border: 1px solid #E3E3E9; + padding: 6px 32px 6px 6px; + width: 100%; + max-width: 450px; + background: white; + display: flex; + justify-content: space-between; + align-items: center; + + p { + color: #777989; + font-size: 16px; + line-height: 19px; + } + } + + .countInfo { + &__imgWrapper { + width: 46px; + height: 46px; + border-radius: 60px; + border: 3px solid white; + + img { + width: 43px; + height: 43px; + } + } + } + + &__items { + position: relative; + margin-top: 40px; + width: 100%; + display: grid; + grid-gap: 24px; + grid-template-columns: 1fr 1fr 1fr; + margin-bottom: 45px; + } + + &__searchTitle { + font-size: 25px; + line-height: 32px; + color: #000000; + margin-bottom: 25px; + } + + &__searchBlock { + display: flex; + justify-content: space-between; + margin-bottom: 39px; + + input { + border-radius: 5px; + border: 0.5px solid #B0BABF; + background: #F4F4F4; + outline: none; + height: 50px; + padding: 0 10px; + font-size: 20px; + width: 100%; + } + + button { + padding: 9px 36px; + border-radius: 44px; + border: none; + background-color: #52B709; + color: white; + font-size: 16px; + margin-left: 20px; + } + } + + &__employees { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + column-gap: 10px; + row-gap: 25px; + margin-bottom: 20px; + } +} -- 2.34.1 From 31faa56d9f73a67486aaf59f5932f34554340294 Mon Sep 17 00:00:00 2001 From: Mikola Date: Mon, 29 Jan 2024 21:19:39 +0300 Subject: [PATCH 2/3] catalogSpecialists --- .../CatalogPersonCard/CatalogPersonCard.jsx | 26 ++++--- .../CatalogSpecialists/CatalogSpecialists.jsx | 68 +++++++++++-------- 2 files changed, 57 insertions(+), 37 deletions(-) diff --git a/src/components/CatalogPersonCard/CatalogPersonCard.jsx b/src/components/CatalogPersonCard/CatalogPersonCard.jsx index 25297ca2..4395c27a 100644 --- a/src/components/CatalogPersonCard/CatalogPersonCard.jsx +++ b/src/components/CatalogPersonCard/CatalogPersonCard.jsx @@ -2,7 +2,15 @@ import React from "react"; import "./catalogPersonCard.scss"; -export const CatalogPersonCard = ({ img, name, salary, category, skills, level, description }) => { +export const CatalogPersonCard = ({ + img, + name, + salary, + category, + skills, + level, + description +}) => { return (
@@ -13,19 +21,21 @@ export const CatalogPersonCard = ({ img, name, salary, category, skills, level,
{name} {salary} / час -

Разработка: {category}

+

+ Разработка: {category} +

{skills.map((item, index) => { - return
- {item} -
+ return ( +
+ {item} +
+ ); })}
-

- {description} -

+

{description}

); }; diff --git a/src/pages/CatalogSpecialists/CatalogSpecialists.jsx b/src/pages/CatalogSpecialists/CatalogSpecialists.jsx index eb67ac65..64962e6a 100644 --- a/src/pages/CatalogSpecialists/CatalogSpecialists.jsx +++ b/src/pages/CatalogSpecialists/CatalogSpecialists.jsx @@ -1,22 +1,22 @@ import React, { useState } from "react"; -import AuthHeader from "@components/Common/AuthHeader/AuthHeader"; -import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; -import { Footer } from "@components/Common/Footer/Footer"; -import CategoriesItem from "@components/CategoriesItem/CategoriesItem"; 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 BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg"; -import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg"; -import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg"; -import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg"; -import TestImg from "assets/images/partnerProfile/PersonalTesters.svg"; import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg"; -import ManageImg from "assets/images/partnerProfile/PersonalMng.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"; @@ -90,7 +90,8 @@ const CatalogSpecialists = () => { category: "Front End", level: "Middle+", skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"], - description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." + description: + "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." }, { name: "Виталий Д.", @@ -99,7 +100,8 @@ const CatalogSpecialists = () => { category: "Front End", level: "Middle+", skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"], - description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." + description: + "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." }, { name: "Виталий Д.", @@ -108,7 +110,8 @@ const CatalogSpecialists = () => { category: "Front End", level: "Middle+", skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"], - description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." + description: + "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." }, { name: "Виталий Д.", @@ -117,7 +120,8 @@ const CatalogSpecialists = () => { category: "Front End", level: "Middle+", skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"], - description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." + description: + "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." }, { name: "Виталий Д.", @@ -126,7 +130,8 @@ const CatalogSpecialists = () => { category: "Front End", level: "Middle+", skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"], - description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." + description: + "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." }, { name: "Виталий Д.", @@ -135,9 +140,10 @@ const CatalogSpecialists = () => { category: "Front End", level: "Middle+", skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"], - description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." + description: + "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS." } - ] + ]; return (
@@ -154,7 +160,7 @@ const CatalogSpecialists = () => {
worker
-

🖐 50+ специалистов доступны

+

🖐 50+ специалистов доступны

@@ -171,23 +177,27 @@ const CatalogSpecialists = () => { ); })}
-

Найти специалиста по навыкам

+

+ Найти специалиста по навыкам +

{mockPersons.map((person, index) => { - return + return ( + + ); })}