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}

img