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..c5a32e9a --- /dev/null +++ b/src/components/VacancyItem/VacancyItem.jsx @@ -0,0 +1,53 @@ +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}

+
+
+
+ +
+ ); +}; 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..4acbe2ec --- /dev/null +++ b/src/components/VacancyTab/VacancyTab.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +import "./vacancyTab.scss"; + +export const VacancyTab = ({ title, active, count, setActive }) => { + return ( +
+

{title}

+ {count} +
+ ); +}; 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..913964d9 100644 --- a/src/pages/OpenRequests/OpenRequest.jsx +++ b/src/pages/OpenRequests/OpenRequest.jsx @@ -1,13 +1,319 @@ -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 { VacancyItem } from "@components/VacancyItem/VacancyItem"; +import { VacancyTab } from "@components/VacancyTab/VacancyTab"; 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 +325,34 @@ 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; + })} +