79 lines
2.6 KiB
JavaScript
79 lines
2.6 KiB
JavaScript
import React, { useState } from 'react';
|
||
import style from './Outstaffing.module.css';
|
||
import OutstaffingBlock from './OutstaffingBlock';
|
||
import TagSelect from '../Select/TagSelect';
|
||
|
||
const Outstaffing = ({ onhandleTabBar, selected, tabs, tags }) => {
|
||
const [selectedItems, setSelectedItems] = useState([]);
|
||
|
||
const handleBlockClick = (item) => {
|
||
if (!selectedItems.find((el) => item === el.value)) {
|
||
setSelectedItems([...selectedItems, { value: item, label: item }]);
|
||
}
|
||
};
|
||
|
||
const handleSubmit = () => {
|
||
const filterItems = JSON.stringify(selectedItems.map((item) => item.value));
|
||
|
||
alert(`Back-end: ${filterItems}`);
|
||
|
||
setSelectedItems([]);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<section className={style.outstaffing}>
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-12">
|
||
<div className={style.outstaffing__title}>
|
||
<h2>
|
||
<span>Аутстаффинг</span> it-персонала
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row">
|
||
<div className="col-12 col-xl-4">
|
||
<OutstaffingBlock
|
||
data={tabs.find((item) => item.name === 'Frontend')}
|
||
dataTags={tags.flat().filter((tag) => tag.name === 'skills_front')}
|
||
onClick={(item) => handleBlockClick(item)}
|
||
onTabBarClick={(name) => onhandleTabBar(name)}
|
||
selected={selected === 'Frontend'}
|
||
/>
|
||
</div>
|
||
<div className="col-12 col-xl-4">
|
||
<OutstaffingBlock
|
||
data={tabs.find((item) => item.name === 'Backend')}
|
||
dataTags={tags.flat().filter((tag) => tag.name === 'skills_back')}
|
||
onClick={(item) => handleBlockClick(item)}
|
||
onTabBarClick={(name) => onhandleTabBar(name)}
|
||
selected={selected === 'Backend'}
|
||
/>
|
||
</div>
|
||
<div className="col-12 col-xl-4">
|
||
<OutstaffingBlock
|
||
data={tabs.find((item) => item.name === 'Design')}
|
||
dataTags={tags.flat().filter((tag) => tag.name === 'skills_design')}
|
||
onClick={(item) => handleBlockClick(item)}
|
||
onTabBarClick={(name) => onhandleTabBar(name)}
|
||
selected={selected === 'Design'}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<TagSelect
|
||
options={tags}
|
||
selectedItems={selectedItems}
|
||
tagSubmit={handleSubmit}
|
||
setSelectedItems={setSelectedItems}
|
||
/>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Outstaffing;
|