fixed route

src/components/Outstaffing/Outstaffing.js

@@ -14,18 +14,21 @@ const Outstaffing = () => {
     const tags = [
       {
         name: 'front',
-        img: '../../images/front_end.png',
-        tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css'],
+        img: front,
+        header: '# Популярный стек',
+        tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
       },
       {
         name: 'back',
-        img: '../../images/back_end.png',
-        tags: ['Ruby on Rails', 'Node.js', 'Express', 'Php', 'Python', 'Wordpress'],
+        img: back,
+        header: '# Популярный стек',
+        tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
       },
       {
         name: 'design',
-        img: '../../images/design.png',
-        tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw'],
+        img: design,
+        header: '# Популярный стек',
+        tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw', 'KompoZer'],
       },
     ];
 
@@ -66,25 +69,19 @@ const Outstaffing = () => {
           <div className="row">
             <div className="col-4">
               <OutstaffingBlock
-                image={front}
                 data={data.find((item) => item.name === 'front')}
-                header={'# Популярный  стек'}
                 onClick={(item) => handleBlockClick(item)}
               />
             </div>
             <div className="col-4">
               <OutstaffingBlock
-                image={back}
                 data={data.find((item) => item.name === 'back')}
-                header={'# Популярный стек'}
                 onClick={(item) => handleBlockClick(item)}
               />
             </div>
             <div className="col-4">
               <OutstaffingBlock
-                image={design}
                 data={data.find((item) => item.name === 'design')}
-                header={'# Популярный стек'}
                 onClick={(item) => handleBlockClick(item)}
               />
             </div>

src/components/Outstaffing/Outstaffing.module.css

@@ -30,7 +30,7 @@
     max-height: 120px;
   }
 
-  .outstaffing__box > p {
+  .outstaffing__box > p{
     font-family: 'GT Eesti Pro Display';
     font-size: 1.2em;
     font-weight: 300;
@@ -40,9 +40,17 @@
     text-align: left;
     margin-top: 60px;
     margin-bottom: 0;
-    margin-left: 16px;
+    /* margin-left: 40px; */
   }
 
+  .outstaffing__box > ul{
+     padding-left: 0;
+
+  }
+
+
+ 
+
   .items > li {
     font-family: 'GT Eesti Pro Display - Thin';
     font-size: 1.8em;

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import style from './Outstaffing.module.css';
 
-const OutstaffingBlock = ({ text, image, data, onClick }) => {
+const OutstaffingBlock = ({ data = {}, onClick }) => {
+  const { img, header, tags } = data;
   return (
     <div className={style.outstaffing__box}>
-      <img src={image} alt="img" />
-      <p>{text}</p>
-      <ul className={style.items}>
-        {data &&
-          data.tags &&
-          data.tags.length &&
-          data.tags.map((item) => (
+      <img src={img} alt="img" />
+      <p>{header}</p>
+      {tags && (
+        <ul className={style.items}>
+          {tags.map((item) => (
             <li key={item} onClick={() => onClick(item)}>
               {item}
             </li>
           ))}
-      </ul>
+        </ul>
+      )}
     </div>
   );
 };