position selected styles and loadMore button fix

public/index.html

@@ -5,7 +5,9 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
+  <meta name="description"
+    content="Аутстаффинг сотрудников. Оформление персонала. Кадровый учет. Аутстаффинг IT разработчиков в России. Услуги аустаффинга и выведения IT разработчиков за штат." />
+  <meta name="copyright" content="Copyright owner" />
 
   <title>Аутстаффинг IT разработчиков в РФ</title>
   <link rel="shortcut icon" href="favicon.ico" />

src/components/Description/Description.js

@@ -61,6 +61,16 @@ const Description = ({ onLoadMore }) => {
             ))}
           </div>
   
+          <div className="row">
+          <div className="col-12">
+            <div className={style.description__footer}>
+              <div className={style.description__footer__btn}>
+                  <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
         </div>
       </section>
     );

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)}
               />
             </div>
             <div className="col-12 col-xl-4">
@@ -40,6 +43,8 @@ const Outstaffing = () => {
                 img={back}
                 header="Бэкенд"
                 positionId='1'
+                isSelected={selectedPositionId==='1'}
+                onSelect={id=>setSelectedPositionId(id)}
               />
             </div>
             <div className="col-12 col-xl-4">
@@ -48,6 +53,8 @@ const Outstaffing = () => {
                 img={design}
                 header="Дизайн"
                 positionId='5'
+                isSelected={selectedPositionId==='5'}
+                onSelect={id=>setSelectedPositionId(id)}
               />
             </div>
           </div>

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;
 }

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 (
-    <div className={style.outstaffing__box}>
+    <div className={`${style.outstaffing__box} ${isSelected?style.outstaffing__box__selected:''}`} onClick={()=>onSelect(positionId)}>
       <div className={`${style.outstaffing__box__img} ${selected ? style.border : ''}`} onClick={()=>handlePositionClick({dispatch, positionId})}>
         <h3>{header}</h3>
         <img className={classes} src={img} alt="img" />