add tabBar func

src/components/Outstaffing/Outstaffing.js

@@ -6,20 +6,20 @@ import design from '../../images/design.png';
 import OutstaffingBlock from './OutstaffingBlock';
 import TagSelect from '../Select/TagSelect';
 
-const Outstaffing = () => {
+const Outstaffing = ({ onhandleTabBar }) => {
   const [data, setData] = useState([]);
   const [selectedItems, setSelectedItems] = useState([]);
 
   useEffect(() => {
     const tags = [
       {
-        name: 'front',
+        name: 'frontend',
         img: front,
         header: '# Популярный стек',
         tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
       },
       {
-        name: 'back',
+        name: 'backend',
         img: back,
         header: '# Популярный стек',
         tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
@@ -69,20 +69,23 @@ const Outstaffing = () => {
           <div className="row">
             <div className="col-4">
               <OutstaffingBlock
-                data={data.find((item) => item.name === 'front')}
+                data={data.find((item) => item.name === 'frontend')}
                 onClick={(item) => handleBlockClick(item)}
+                onClickhandleTabBar={(name) => onhandleTabBar(name)}
               />
             </div>
             <div className="col-4">
               <OutstaffingBlock
-                data={data.find((item) => item.name === 'back')}
+                data={data.find((item) => item.name === 'backend')}
                 onClick={(item) => handleBlockClick(item)}
+                onClickhandleTabBar={(name) => onhandleTabBar(name)}
               />
             </div>
             <div className="col-4">
               <OutstaffingBlock
                 data={data.find((item) => item.name === 'design')}
                 onClick={(item) => handleBlockClick(item)}
+                onClickhandleTabBar={(name) => onhandleTabBar(name)}
               />
             </div>
           </div>

src/components/Outstaffing/Outstaffing.module.css

@@ -1,4 +1,4 @@
- 
+
   .outstaffing__title {
     margin-top: 60px;
     }
@@ -27,7 +27,8 @@
     
   .outstaffing__box > img {
     max-width: 240px;
-    max-height: 120px;
+    min-height: 120px;
+    cursor: pointer;
   }
 
   .outstaffing__box > p{
@@ -52,13 +53,14 @@
  
 
   .items > li {
-    font-family: 'GT Eesti Pro Display - Thin';
+    font-family: 'GT Eesti Pro Display';
     font-size: 1.8em;
-    font-weight: 400;
+    font-weight: 100;
     font-style: normal;
     letter-spacing: normal;
     line-height: 36px;
     text-align: left;
     list-style: none;
     cursor: pointer;
-}
+}
+

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import style from './Outstaffing.module.css';
 
-const OutstaffingBlock = ({ data = {}, onClick }) => {
-  const { img, header, tags } = data;
+const OutstaffingBlock = ({ data = {}, onClick, onClickhandleTabBar }) => {
+  const { img, header, tags, name } = data;
   return (
     <div className={style.outstaffing__box}>
-      <img src={img} alt="img" />
+      <img onClick={() => onClickhandleTabBar(name)} src={img} alt="img" />
       <p>{header}</p>
       {tags && (
         <ul className={style.items}>