add tabBar func

src/components/Description/Description.js

@@ -6,7 +6,7 @@ import arrowLeft from '../../images/arrow_left.png';
 import arrowRight from '../../images/arrow_right.png';
 import { Link } from 'react-router-dom';
 
-const Description = ({ candidatesListArr }) => {
+const Description = ({ candidatesListArr, onhandleTabBar }) => {
   return (
     <section className={style.description}>
       <div className="container">
@@ -29,10 +29,12 @@ const Description = ({ candidatesListArr }) => {
                   <button className={style.description__button}>Подробное резюме</button>
                 </Link>
               </div>
-              <div className="col-12">
+              <div className="col-2"></div>
+              <div className="col-6">
                 <span className={style.description__sp}> {el.tags}</span>
                 <img className={style.description__rectangle} src={rectangle} alt="" />
               </div>
+              <div className="col-4"></div>
             </div>
           ))}
         </div>
@@ -47,7 +49,7 @@ const Description = ({ candidatesListArr }) => {
                 <div className={style.arrow__left}>
                   <img src={arrowLeft} alt="" />
                 </div>
-                <span className={style.description__footer__sp}>1/15</span>
+                <span className={style.description__footer__sp}>1 / 15</span>
                 <div className={style.arrow__right}>
                   <img src={arrowRight} alt="" />
                 </div>

src/components/Description/Description.module.css

@@ -5,7 +5,8 @@
 }
 
 .description__wrapper {
-  border: 2px solid whitesmoke;
+  border: 1px solid #efefef;
+  background-color: #fdfdfd;
   padding-top: 60px;
   border-bottom: none;
 }
@@ -25,8 +26,8 @@
 }
 .description__text {
   font-family: 'GT Eesti Pro Display';
-  font-size: 1.6em;
-  font-weight: 400;
+  font-size: 1.7em;
+  font-weight: 100;
   font-style: normal;
   letter-spacing: normal;
   line-height: 24px;
@@ -35,32 +36,35 @@
 }
 .description__button {
   width: 280px;
-  height: 62px;
+  height: 60px;
   border-radius: 100px;
-  background-color: #5ab426;
+  background-color: #73c141;
   border: none;
   color: #ffffff;
   font-family: 'Muller Extra Bold';
-  font-size: 1.8em;
+  font-size: 1.6em;
   font-weight: 600;
+  line-height: normal;
   font-style: normal;
-  letter-spacing: normal;
+  letter-spacing: 0.8px;
   text-align: center;
   margin-top: 74px;
+  margin-left: 30px;
 }
 .description__sp {
   display: block;
   font-family: 'GT Eesti Pro Display';
-  font-size: 1.6em;
-  font-weight: 700;
+  font-size: 1.7em;
+  font-weight: 400;
   font-style: normal;
   letter-spacing: normal;
-  text-align: center;
+  text-align: left;
+  line-height: 36px;
   margin-top: 20px;
 }
 .description__rectangle {
   display: block;
-  margin: 60px auto;
+  margin: 50px auto;
 }
 .description__footer {
   display: flex;
@@ -69,18 +73,18 @@
 }
 
 .description__footer__btn > button {
-  width: 220px;
-  height: 60px;
+  width: 200px;
+  height: 48px;
   border-radius: 100px;
-  border: 1px solid #5ab424;
+  border: 1px solid #73c141;
   background-color: white;
   margin-right: 60px;
   color: #a0a0a0;
   font-family: 'GT Eesti Pro Display';
   font-size: 1.8em;
-  font-weight: 600;
+  font-weight: 400;
   font-style: normal;
-  letter-spacing: normal;
+  letter-spacing: 0.6px;
   line-height: normal;
   text-align: center;
 }
@@ -92,7 +96,7 @@
 .description__footer__sp {
   color: #705fa3;
   font-family: Circe;
-  font-size: 1.6em;
+  font-size: 1.3em;
   font-weight: 400;
   font-style: normal;
   letter-spacing: normal;
@@ -105,7 +109,7 @@
   height: 30px;
   border-radius: 20px;
   background-color: #f6f6f6;
-  
+  cursor: pointer;
 }
 
 .arrow__left > img {
@@ -121,7 +125,7 @@
   height: 30px;
   border-radius: 20px;
   background-color: #74be4d;
-
+cursor: pointer;
 }
 
 .arrow__right > img {

src/components/Home/Home.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Outstaffing from '../Outstaffing/Outstaffing';
 import Description from '../Description/Description';
 import front from '../../images/front_end.png';
@@ -28,10 +28,19 @@ export const candidatesList = [
 ];
 
 const Home = () => {
+  const [tabs, setTabs] = useState([]);
+
+  const handleTabBar = (name) => {
+    const tabFilter = candidatesList.filter((el) => el.name.toLowerCase() === name);
+
+    console.log(tabFilter);
+
+    setTabs(tabFilter);
+  };
   return (
     <>
-      <Outstaffing />
-      <Description candidatesListArr={candidatesList} />
+      <Outstaffing onhandleTabBar={(name) => handleTabBar(name)} />
+      <Description candidatesListArr={tabs.length > 0 ? tabs : candidatesList} />
     </>
   );
 };

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

src/components/Select/TagSelect.js

@@ -25,7 +25,7 @@ const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
                     })}
                 />
                 <button onClick={tagSubmit} type="submit">
-                  Submit
+                  Поиск
                 </button>
               </div>
             </div>

src/components/Select/TagSelect.module.css

@@ -1,10 +1,10 @@
 .search {
-  margin-top: 40px;
+  margin-top: 73px;
 }
   .search__title {
     font-family: 'GT Eesti Pro Display';
     font-size: 2.4em;
-    font-weight: 700;
+    font-weight: 500;
     font-style: normal;
     letter-spacing: normal;
     line-height: normal;
@@ -18,17 +18,18 @@
   }
 
   .search__box > button {
+    color: white;
     width: 131px;
     height: 40px;
     border-radius: 10px;
-    background-color: #e8e8e8;
     border: none;
-    font-family: 'GT Eesti Pro Display';
+    font-family: 'Muller Extra Bold';
     font-size: 1.8em;
-    font-weight: 400;
     font-style: normal;
     letter-spacing: normal;
     text-align: center;
+    background-color: #73c141;
+    font-weight: 600;
   }
 
 
@@ -42,7 +43,7 @@
 
 [class$='-control'] {
   border-color: #e8e8e8 !important;
-  box-shadow: 0 0 0 1px #e8e8e8 !important;
+  box-shadow: 0 0 0 0 #e8e8e8 !important;
 }
 
 [class$='-value__label'] {

src/fonts/stylesheet.css

@@ -334,3 +334,13 @@
     font-style: italic;
 }
 
+@font-face {
+    font-family: 'Circle';
+    src: 
+        url('BasierCircle-Regular.woff2') format('woff2'),
+        url('BasierCircle-Regular.woff') format('woff'),
+        url('BasierCircle-Regular.ttf') format('truetype');
+    font-weight: 100;
+    font-style: italic;
+}
+