diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js index 5ea6ae56..21c68c52 100644 --- a/src/components/Outstaffing/Outstaffing.js +++ b/src/components/Outstaffing/Outstaffing.js @@ -11,17 +11,34 @@ const Outstaffing = () => { const [selectedItems, setSelectedItems] = useState([]); useEffect(() => { - const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Vue.js', 'Typescript', 'ReactJS']; - setData(tempData); + const tags = [ + { + name: 'front', + img: '../../images/front_end.png', + tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css'], + }, + { + name: 'back', + img: '../../images/back_end.png', + tags: ['Ruby on Rails', 'Node.js', 'Express', 'Php', 'Python', 'Wordpress'], + }, + { + name: 'design', + img: '../../images/design.png', + tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw'], + }, + ]; + + setData(tags); }, []); - const handleBlockClick = (index) => { - if (selectedItems.find((item) => item.value === data[index])) { - return; - // setSelectedItems(selectedItems.filter((item) => item.value !== data[index])); - } else { - setSelectedItems([...selectedItems, { value: data[index], label: data[index] }]); + const handleBlockClick = (item) => { + if (!selectedItems.find((el) => item === el.value)) { + setSelectedItems([...selectedItems, { value: item, label: item }]); } + // else { + // setSelectedItems(selectedItems.filter((el) => item !== el.value)); + // } }; const handleSubmit = () => { @@ -50,25 +67,25 @@ const Outstaffing = () => {
handleBlockClick(index)} + data={data.find((item) => item.name === 'front')} + header={'# Популярный стек'} + onClick={(item) => handleBlockClick(item)} />
item.name === 'back')} header={'# Популярный стек'} - onClick={(index) => handleBlockClick(index)} + onClick={(item) => handleBlockClick(item)} />
item.name === 'design')} header={'# Популярный стек'} - onClick={(index) => handleBlockClick(index)} + onClick={(item) => handleBlockClick(item)} />
diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js index 38ef1f04..a7b0fd52 100644 --- a/src/components/Outstaffing/OutstaffingBlock.js +++ b/src/components/Outstaffing/OutstaffingBlock.js @@ -1,3 +1,4 @@ +import React from 'react'; import style from './Outstaffing.module.css'; const OutstaffingBlock = ({ text, image, data, onClick }) => { @@ -6,11 +7,14 @@ const OutstaffingBlock = ({ text, image, data, onClick }) => { img

{text}

); diff --git a/src/components/Select/TagSelect.js b/src/components/Select/TagSelect.js index 2376ba1c..9f054184 100644 --- a/src/components/Select/TagSelect.js +++ b/src/components/Select/TagSelect.js @@ -18,9 +18,11 @@ const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => { name="tags" className={style.select} classNamePrefix={style.select} - options={options.map((item) => { - return { value: item, label: item }; - })} + options={options + .flatMap((el) => el.tags) + .map((item) => { + return { value: item, label: item }; + })} />