diff --git a/public/index.html b/public/index.html
index f1d6ec2e..27e50bb3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,9 @@
-
+
+
Аутстаффинг IT разработчиков в РФ
diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js
index 49298f86..c6627b0e 100644
--- a/src/components/Description/Description.js
+++ b/src/components/Description/Description.js
@@ -61,6 +61,16 @@ const Description = ({ onLoadMore }) => {
))}
+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js
index 26911d04..180ad487 100644
--- a/src/components/Outstaffing/Outstaffing.js
+++ b/src/components/Outstaffing/Outstaffing.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import style from './Outstaffing.module.css';
import OutstaffingBlock from './OutstaffingBlock';
@@ -9,6 +9,7 @@ import back from '../../images/back_end.png';
import design from '../../images/design.png';
const Outstaffing = () => {
+ const [selectedPositionId, setSelectedPositionId] = useState(null);
const tagsArr = useSelector(selectTags);
return (
@@ -32,6 +33,8 @@ const Outstaffing = () => {
img={front}
header="Фронтенд"
positionId='2'
+ isSelected={selectedPositionId==='2'}
+ onSelect={id=>setSelectedPositionId(id)}
/>
@@ -40,6 +43,8 @@ const Outstaffing = () => {
img={back}
header="Бэкенд"
positionId='1'
+ isSelected={selectedPositionId==='1'}
+ onSelect={id=>setSelectedPositionId(id)}
/>
@@ -48,6 +53,8 @@ const Outstaffing = () => {
img={design}
header="Дизайн"
positionId='5'
+ isSelected={selectedPositionId==='5'}
+ onSelect={id=>setSelectedPositionId(id)}
/>
diff --git a/src/components/Outstaffing/Outstaffing.module.css b/src/components/Outstaffing/Outstaffing.module.css
index d7c1816e..02831d06 100644
--- a/src/components/Outstaffing/Outstaffing.module.css
+++ b/src/components/Outstaffing/Outstaffing.module.css
@@ -1,3 +1,8 @@
+.outstaffing__box__selected .outstaffing__box__img {
+ background-color: #52b70999;
+ color: #f9f9f9;
+}
+
.outstaffing__title {
margin-top: 60px;
}
diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js
index 43aed4f2..82cb2606 100644
--- a/src/components/Outstaffing/OutstaffingBlock.js
+++ b/src/components/Outstaffing/OutstaffingBlock.js
@@ -11,7 +11,7 @@ const handlePositionClick = ({dispatch, positionId}) => {
);
};
-const OutstaffingBlock = ({ dataTags = [], selected, img, header, positionId }) => {
+const OutstaffingBlock = ({ dataTags = [], selected, img, header, positionId, isSelected, onSelect }) => {
console.log('p', positionId)
const dispatch = useDispatch();
@@ -36,7 +36,7 @@ const OutstaffingBlock = ({ dataTags = [], selected, img, header, positionId })
});
return (
-
+
onSelect(positionId)}>
handlePositionClick({dispatch, positionId})}>
{header}