add tabBar func
This commit is contained in:
parent
105e2a78e2
commit
d66db160ad
@ -6,7 +6,7 @@ import arrowLeft from '../../images/arrow_left.png';
|
|||||||
import arrowRight from '../../images/arrow_right.png';
|
import arrowRight from '../../images/arrow_right.png';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
const Description = ({ candidatesListArr }) => {
|
const Description = ({ candidatesListArr, onhandleTabBar }) => {
|
||||||
return (
|
return (
|
||||||
<section className={style.description}>
|
<section className={style.description}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
@ -29,10 +29,12 @@ const Description = ({ candidatesListArr }) => {
|
|||||||
<button className={style.description__button}>Подробное резюме</button>
|
<button className={style.description__button}>Подробное резюме</button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-2"></div>
|
||||||
|
<div className="col-6">
|
||||||
<span className={style.description__sp}> {el.tags}</span>
|
<span className={style.description__sp}> {el.tags}</span>
|
||||||
<img className={style.description__rectangle} src={rectangle} alt="" />
|
<img className={style.description__rectangle} src={rectangle} alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-4"></div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@ -47,7 +49,7 @@ const Description = ({ candidatesListArr }) => {
|
|||||||
<div className={style.arrow__left}>
|
<div className={style.arrow__left}>
|
||||||
<img src={arrowLeft} alt="" />
|
<img src={arrowLeft} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<span className={style.description__footer__sp}>1/15</span>
|
<span className={style.description__footer__sp}>1 / 15</span>
|
||||||
<div className={style.arrow__right}>
|
<div className={style.arrow__right}>
|
||||||
<img src={arrowRight} alt="" />
|
<img src={arrowRight} alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,7 +5,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.description__wrapper {
|
.description__wrapper {
|
||||||
border: 2px solid whitesmoke;
|
border: 1px solid #efefef;
|
||||||
|
background-color: #fdfdfd;
|
||||||
padding-top: 60px;
|
padding-top: 60px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
@ -25,8 +26,8 @@
|
|||||||
}
|
}
|
||||||
.description__text {
|
.description__text {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display';
|
||||||
font-size: 1.6em;
|
font-size: 1.7em;
|
||||||
font-weight: 400;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
@ -35,32 +36,35 @@
|
|||||||
}
|
}
|
||||||
.description__button {
|
.description__button {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
height: 62px;
|
height: 60px;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
background-color: #5ab426;
|
background-color: #73c141;
|
||||||
border: none;
|
border: none;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: 'Muller Extra Bold';
|
font-family: 'Muller Extra Bold';
|
||||||
font-size: 1.8em;
|
font-size: 1.6em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: 0.8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 74px;
|
margin-top: 74px;
|
||||||
|
margin-left: 30px;
|
||||||
}
|
}
|
||||||
.description__sp {
|
.description__sp {
|
||||||
display: block;
|
display: block;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display';
|
||||||
font-size: 1.6em;
|
font-size: 1.7em;
|
||||||
font-weight: 700;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
|
line-height: 36px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.description__rectangle {
|
.description__rectangle {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 60px auto;
|
margin: 50px auto;
|
||||||
}
|
}
|
||||||
.description__footer {
|
.description__footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -69,18 +73,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.description__footer__btn > button {
|
.description__footer__btn > button {
|
||||||
width: 220px;
|
width: 200px;
|
||||||
height: 60px;
|
height: 48px;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
border: 1px solid #5ab424;
|
border: 1px solid #73c141;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin-right: 60px;
|
margin-right: 60px;
|
||||||
color: #a0a0a0;
|
color: #a0a0a0;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display';
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
font-weight: 600;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: 0.6px;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -92,7 +96,7 @@
|
|||||||
.description__footer__sp {
|
.description__footer__sp {
|
||||||
color: #705fa3;
|
color: #705fa3;
|
||||||
font-family: Circe;
|
font-family: Circe;
|
||||||
font-size: 1.6em;
|
font-size: 1.3em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
@ -105,7 +109,7 @@
|
|||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow__left > img {
|
.arrow__left > img {
|
||||||
@ -121,7 +125,7 @@
|
|||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background-color: #74be4d;
|
background-color: #74be4d;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow__right > img {
|
.arrow__right > img {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import Outstaffing from '../Outstaffing/Outstaffing';
|
import Outstaffing from '../Outstaffing/Outstaffing';
|
||||||
import Description from '../Description/Description';
|
import Description from '../Description/Description';
|
||||||
import front from '../../images/front_end.png';
|
import front from '../../images/front_end.png';
|
||||||
@ -28,10 +28,19 @@ export const candidatesList = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
|
const [tabs, setTabs] = useState([]);
|
||||||
|
|
||||||
|
const handleTabBar = (name) => {
|
||||||
|
const tabFilter = candidatesList.filter((el) => el.name.toLowerCase() === name);
|
||||||
|
|
||||||
|
console.log(tabFilter);
|
||||||
|
|
||||||
|
setTabs(tabFilter);
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Outstaffing />
|
<Outstaffing onhandleTabBar={(name) => handleTabBar(name)} />
|
||||||
<Description candidatesListArr={candidatesList} />
|
<Description candidatesListArr={tabs.length > 0 ? tabs : candidatesList} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -6,20 +6,20 @@ import design from '../../images/design.png';
|
|||||||
import OutstaffingBlock from './OutstaffingBlock';
|
import OutstaffingBlock from './OutstaffingBlock';
|
||||||
import TagSelect from '../Select/TagSelect';
|
import TagSelect from '../Select/TagSelect';
|
||||||
|
|
||||||
const Outstaffing = () => {
|
const Outstaffing = ({ onhandleTabBar }) => {
|
||||||
const [data, setData] = useState([]);
|
const [data, setData] = useState([]);
|
||||||
const [selectedItems, setSelectedItems] = useState([]);
|
const [selectedItems, setSelectedItems] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const tags = [
|
const tags = [
|
||||||
{
|
{
|
||||||
name: 'front',
|
name: 'frontend',
|
||||||
img: front,
|
img: front,
|
||||||
header: '# Популярный стек',
|
header: '# Популярный стек',
|
||||||
tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
|
tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'back',
|
name: 'backend',
|
||||||
img: back,
|
img: back,
|
||||||
header: '# Популярный стек',
|
header: '# Популярный стек',
|
||||||
tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
|
tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
|
||||||
@ -69,20 +69,23 @@ const Outstaffing = () => {
|
|||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
<OutstaffingBlock
|
<OutstaffingBlock
|
||||||
data={data.find((item) => item.name === 'front')}
|
data={data.find((item) => item.name === 'frontend')}
|
||||||
onClick={(item) => handleBlockClick(item)}
|
onClick={(item) => handleBlockClick(item)}
|
||||||
|
onClickhandleTabBar={(name) => onhandleTabBar(name)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
<OutstaffingBlock
|
<OutstaffingBlock
|
||||||
data={data.find((item) => item.name === 'back')}
|
data={data.find((item) => item.name === 'backend')}
|
||||||
onClick={(item) => handleBlockClick(item)}
|
onClick={(item) => handleBlockClick(item)}
|
||||||
|
onClickhandleTabBar={(name) => onhandleTabBar(name)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
<OutstaffingBlock
|
<OutstaffingBlock
|
||||||
data={data.find((item) => item.name === 'design')}
|
data={data.find((item) => item.name === 'design')}
|
||||||
onClick={(item) => handleBlockClick(item)}
|
onClick={(item) => handleBlockClick(item)}
|
||||||
|
onClickhandleTabBar={(name) => onhandleTabBar(name)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
|
|
||||||
.outstaffing__title {
|
.outstaffing__title {
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
}
|
}
|
||||||
@ -27,7 +27,8 @@
|
|||||||
|
|
||||||
.outstaffing__box > img {
|
.outstaffing__box > img {
|
||||||
max-width: 240px;
|
max-width: 240px;
|
||||||
max-height: 120px;
|
min-height: 120px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.outstaffing__box > p{
|
.outstaffing__box > p{
|
||||||
@ -52,13 +53,14 @@
|
|||||||
|
|
||||||
|
|
||||||
.items > li {
|
.items > li {
|
||||||
font-family: 'GT Eesti Pro Display - Thin';
|
font-family: 'GT Eesti Pro Display';
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
font-weight: 400;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import style from './Outstaffing.module.css';
|
import style from './Outstaffing.module.css';
|
||||||
|
|
||||||
const OutstaffingBlock = ({ data = {}, onClick }) => {
|
const OutstaffingBlock = ({ data = {}, onClick, onClickhandleTabBar }) => {
|
||||||
const { img, header, tags } = data;
|
const { img, header, tags, name } = data;
|
||||||
return (
|
return (
|
||||||
<div className={style.outstaffing__box}>
|
<div className={style.outstaffing__box}>
|
||||||
<img src={img} alt="img" />
|
<img onClick={() => onClickhandleTabBar(name)} src={img} alt="img" />
|
||||||
<p>{header}</p>
|
<p>{header}</p>
|
||||||
{tags && (
|
{tags && (
|
||||||
<ul className={style.items}>
|
<ul className={style.items}>
|
||||||
|
@ -25,7 +25,7 @@ const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
|
|||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
<button onClick={tagSubmit} type="submit">
|
<button onClick={tagSubmit} type="submit">
|
||||||
Submit
|
Поиск
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
.search {
|
.search {
|
||||||
margin-top: 40px;
|
margin-top: 73px;
|
||||||
}
|
}
|
||||||
.search__title {
|
.search__title {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'GT Eesti Pro Display';
|
||||||
font-size: 2.4em;
|
font-size: 2.4em;
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
@ -18,17 +18,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search__box > button {
|
.search__box > button {
|
||||||
|
color: white;
|
||||||
width: 131px;
|
width: 131px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: #e8e8e8;
|
|
||||||
border: none;
|
border: none;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: 'Muller Extra Bold';
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: #73c141;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -42,7 +43,7 @@
|
|||||||
|
|
||||||
[class$='-control'] {
|
[class$='-control'] {
|
||||||
border-color: #e8e8e8 !important;
|
border-color: #e8e8e8 !important;
|
||||||
box-shadow: 0 0 0 1px #e8e8e8 !important;
|
box-shadow: 0 0 0 0 #e8e8e8 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class$='-value__label'] {
|
[class$='-value__label'] {
|
||||||
|
BIN
src/fonts/BasierCircle-Regular.ttf
Normal file
BIN
src/fonts/BasierCircle-Regular.ttf
Normal file
Binary file not shown.
BIN
src/fonts/BasierCircle-Regular.woff
Normal file
BIN
src/fonts/BasierCircle-Regular.woff
Normal file
Binary file not shown.
BIN
src/fonts/BasierCircle-Regular.woff2
Normal file
BIN
src/fonts/BasierCircle-Regular.woff2
Normal file
Binary file not shown.
@ -334,3 +334,13 @@
|
|||||||
font-style: italic;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user