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 }) => {
{text}
- {data.map((item, index) => (
- - onClick(index)}>
- {index} {item}
-
- ))}
+ {data &&
+ data.tags &&
+ data.tags.length &&
+ data.tags.map((item) => (
+ - onClick(item)}>
+ {item}
+
+ ))}
);
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 };
+ })}
/>