diff --git a/src/assets/images/VacancyItemImg.svg b/src/assets/images/VacancyItemImg.svg new file mode 100644 index 00000000..62e70507 --- /dev/null +++ b/src/assets/images/VacancyItemImg.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/VacancyItem/VacancyItem.jsx b/src/components/VacancyItem/VacancyItem.jsx new file mode 100644 index 00000000..014b28cd --- /dev/null +++ b/src/components/VacancyItem/VacancyItem.jsx @@ -0,0 +1,46 @@ +import React from "react"; + +import { Link } from "react-router-dom"; +import titleImg from "assets/images/VacancyItemImg.svg"; + +import "./vacancyItem.scss"; + +export const VacancyItem= ({ vacancy: { name, description, level, price, location, count } }) => { + return ( +
+
+
+ + img + +

{name}

+
+

{description}

+
+
+
+
+ Грейд: +

{level}

+
+
+ Ставка: +

{price}

+
+ Все требования по вакансии +
+
+
+ Локация: +

{location}

+
+
+ Кол-во человек: +

{count}

+
+
+
+ +
+ ); +}; \ No newline at end of file diff --git a/src/components/VacancyItem/vacancyItem.scss b/src/components/VacancyItem/vacancyItem.scss new file mode 100644 index 00000000..e8ee2381 --- /dev/null +++ b/src/components/VacancyItem/vacancyItem.scss @@ -0,0 +1,113 @@ +.vacancy__item { + display: flex; + flex-direction: column; + max-width: 325px; + width: 100%; + position: relative; + + &__head { + display: flex; + flex-direction: column; + background: white; + border: 1px solid #DDDFE4; + border-radius: 8px; + padding: 24px 20px 8px; + z-index: 2; + } + + &__title { + display: flex; + align-items: center; + column-gap: 18px; + + h4 { + font-weight: 500; + color: #2E3A59; + font-size: 20px; + margin-bottom: 0; + } + } + + &__img { + background: #52B709; + border-radius: 4px; + width: 24px; + height: 24px; + display: flex; + justify-content: center; + align-items: center; + } + + &__description { + margin-top: 10px; + color: #2E3A59; + font-size: 14px; + line-height: 17.5px; + } + + &__block { + display: flex; + position: relative; + top: -12px; + z-index: 1; + + &--left { + background: #EBEBEB; + border: 1px solid #DDDFE4; + border-radius: 8px; + display: flex; + flex-direction: column; + width: 100%; + padding: 20px 20px 12px; + row-gap: 14px; + } + + &--right { + background: #EBEBEB; + border: 1px solid #DDDFE4; + border-radius: 8px; + display: flex; + flex-direction: column; + width: 100%; + padding: 20px 20px 12px; + row-gap: 14px; + height: 70%; + } + } + + &__info { + color: #000000; + font-size: 14px; + span { + font-weight: 700; + } + } + + &__more { + font-size: 12px; + text-decoration: underline; + max-width: 97px; + cursor: pointer; + color: #000000; + + &:hover { + color: #000000; + } + } + + &__btn { + position: absolute; + max-width: 150px; + width: 100%; + border: none; + background: #52B709; + border-radius: 44px; + right: 5px; + padding: 10px 0; + font-size: 14px; + color: #FFFFFF; + bottom: 17px; + cursor: pointer; + z-index: 3; + } +} \ No newline at end of file diff --git a/src/components/VacancyTab/VacancyTab.jsx b/src/components/VacancyTab/VacancyTab.jsx new file mode 100644 index 00000000..1ded3625 --- /dev/null +++ b/src/components/VacancyTab/VacancyTab.jsx @@ -0,0 +1,12 @@ +import React from "react"; + +import "./vacancyTab.scss"; + +export const VacancyTab = ({ title, active, count, setActive }) => { + return ( +
+

{title}

+ {count} +
+ ); +}; \ No newline at end of file diff --git a/src/components/VacancyTab/vacancyTab.scss b/src/components/VacancyTab/vacancyTab.scss new file mode 100644 index 00000000..20477f36 --- /dev/null +++ b/src/components/VacancyTab/vacancyTab.scss @@ -0,0 +1,25 @@ +.vacancy__tab { + display: flex; + justify-content: space-between; + background: #FFFFFF; + border-radius: 8px; + padding: 10px 8px 10px 16px; + border: 2px solid white; + max-width: 178px; + width: 100%; + cursor: pointer; + + &__title { + color: #2E3A59; + font-size: 16px; + } + + &__count { + color: #1458DD; + font-size: 16px; + } + + &--active { + border: 2px solid #52B709; + } +} \ No newline at end of file diff --git a/src/pages/OpenRequests/OpenRequest.jsx b/src/pages/OpenRequests/OpenRequest.jsx index 1bd5f17a..2f368f64 100644 --- a/src/pages/OpenRequests/OpenRequest.jsx +++ b/src/pages/OpenRequests/OpenRequest.jsx @@ -1,13 +1,289 @@ -import React from "react"; +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 (
@@ -19,11 +295,28 @@ export const OpenRequest = () => { { name: "Главная", link: "/profile" }, { name: "Работа в IT открытые запросы", - link: "/profile/open-request" + link: "/profile/open-requests" } ]} />

Работа в IT открытые запросы

+
+ {vacancy.map((item, index) => { + return setActiveTab(item.name)} key={index} /> + }) + } +
+
+ {vacancy.map((item) => { + if (item.name === activeTab) { + return item.items.map((vacancy, index) => { + return + }); + } + return null + })} +