add selector component

src/components/Candidate/Candidate.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import style from './Candidate.module.scss';
-// import { candidatesList } from '../Home/sections/Description';
+import { candidatesList } from '../Home/Home';
 import icon from '../../images/front_end.png';
 import arrow from '../../images/right-arrow.png';
 import rectangle from '../../images/rectangle_secondPage.png';
@@ -17,9 +17,11 @@ import SectionSkills from './sections/SectionSkills';
 const Candidate = () => {
   const history = useHistory();
 
-  // const { id: candidateId } = useParams();
+  const { id: candidateId } = useParams();
 
-  // const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));
+  const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));
+
+  const { name } = currentCandidate;
 
   return (
     <section className={classes.candidate}>
@@ -56,7 +58,7 @@ const Candidate = () => {
 
             <div className="col-8">
               <div className={style.candidate__main__description}>
-                <h2>Frontend разработчик, Middle</h2>
+                <h2>{name} разработчик, Middle</h2>
                 <img src={rectangle} alt="" />
                 <p># Описание опыта</p>
                 <SectionOne />

src/components/Home/Home.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import Outstaffing from './sections/Outstaffing';
 import Description from './sections/Description';
-import Search from './sections/Search';
+import TagSelect from '../Select/Select';
+
+export const candidatesList = [
+  { id: 1, name: 'Frontend' },
+  { id: 2, name: 'Backend' },
+];
 
 const Home = () => {
   return (
     <>
       <Outstaffing />
-      <Search />
-      <Description />
+      <TagSelect />
+      <Description arr={candidatesList} />
     </>
   );
 };

src/components/Home/sections/Description.js

@@ -5,20 +5,19 @@ import rectangle from '../../../images/rectangle_secondPage.png';
 import arrowLeft from '../../../images/arrow_left.png';
 import arrowRight from '../../../images/arrow_right.png';
 import { Link } from 'react-router-dom';
-import { candidatesList } from '../sections/Search';
 
-const Description = () => {
+const Description = ({ arr }) => {
   return (
     <section className={style.description}>
       <div className="container">
         <div className={style.description__wrapper}>
-          {candidatesList.map((el) => (
+          {arr.map((el) => (
             <div className="row" key={el.id}>
               <div className="col-2">
                 <img className={style.description__img} src={photo} alt="" />
               </div>
               <div className="col-6">
-                <h3 className={style.description__title}>Frontend разработчик, Middle</h3>
+                <h3 className={style.description__title}>{el.name} разработчик, Middle</h3>
                 <p className={style.description__text}>
                   - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift.
                 </p>

src/components/Home/sections/Search.js

@@ -1,40 +0,0 @@
-import React, { useState } from 'react';
-import style from './Search.module.scss';
-
-export const candidatesList = [
-  { id: 1, name: 'Artyom' },
-  { id: 2, name: 'Vitaliy' },
-];
-
-const Search = ({ onTe }) => {
-  const [input, setInput] = useState('');
-
-  // const test = (input, candidatesList) => {
-  //   return candidatesList.filter((el) => el.name.toLowerCase().includes(input.toLowerCase()));
-  // };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
-    setInput('');
-  };
-
-  return (
-    <section className={style.search}>
-      <div className="container">
-        <div className="row">
-          <div className="col-12">
-            <h2>Найти специалиста по навыкам</h2>
-
-            <form action="" onSubmit={handleSubmit}>
-              <button type={style.submit}>JavaScript</button>
-              <input value={input} onChange={(e) => setInput(e.target.value)} type={style.text} />
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Search;

src/components/Home/sections/Search.module.scss

@@ -1,46 +0,0 @@
-.search {
-  margin-top: 40px;
-  & h2 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 2.4em;
-    font-weight: 700;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: normal;
-    text-align: center;
-    margin-bottom: 40px;
-  }
-  & form {
-    position: relative;
-    width: 100%;
-    height: 60px;
-    border: 1px solid whitesmoke;
-    & input {
-      width: 100%;
-      height: 100%;
-      border: none;
-      margin-left: 160px;
-      font-size: 1.8em;
-    }
-    & input:focus,
-    & input:active {
-      outline: none;
-    }
-    & button {
-      position: absolute;
-      top: 15%;
-      left: 1%;
-      width: 131px;
-      height: 40px;
-      border-radius: 10px;
-      background-color: #e8e8e8;
-      border: none;
-      font-family: 'GT Eesti Pro Display';
-      font-size: 1.8em;
-      font-weight: 400;
-      font-style: normal;
-      letter-spacing: normal;
-      text-align: center;
-    }
-  }
-}

src/components/Select/Select.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import Select from 'react-select';
+import style from './Select.module.scss';
+
+const options = [
+  { value: 'Ruby on Rails', label: 'Ruby on Rails' },
+  { value: 'Nginx', label: 'Nginx' },
+  { value: 'Docker', label: 'Docker' },
+  { value: 'PostgreSQL', label: 'PostgreSQL' },
+  { value: 'Vue.js', label: 'Vue.js' },
+  { value: 'Typescript', label: 'Typescript' },
+  { value: 'ReactJ', label: 'ReactJ' },
+];
+
+const TagSelect = () => {
+  const [items, setItems] = useState(null);
+
+  const handleChange = (values) => {
+    const selectItems = values.map((value) => value);
+
+    setItems(selectItems);
+  };
+
+  const handleSubmit = () => {
+    const filterItems = JSON.stringify(items.map((item) => item.value));
+
+    alert(`Back-end: ${filterItems}`);
+
+    setItems('');
+  };
+
+  return (
+    <>
+      <section className={style.search}>
+        <div className="container">
+          <div className="row">
+            <div className="col-12">
+              <h2>Найти специалиста по навыкам</h2>
+              <div className={style.search__box}>
+                <Select
+                  value={items}
+                  onChange={handleChange}
+                  isMulti
+                  name="colors"
+                  className={style.select}
+                  classNamePrefix={style.select}
+                  options={options}
+                />
+                <button onClick={handleSubmit} type="submit">
+                  Submit
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default TagSelect;

src/components/Select/Select.module.scss

@@ -0,0 +1,44 @@
+.search {
+  margin-top: 40px;
+  & h2 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 2.4em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: normal;
+    text-align: center;
+    margin-bottom: 40px;
+  }
+
+  &__box {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  & button {
+    width: 131px;
+    height: 40px;
+    border-radius: 10px;
+    background-color: #e8e8e8;
+    border: none;
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    text-align: center;
+  }
+}
+
+.select {
+  width: 85%;
+
+  [class$='-placeholder'] {
+    display: none;
+  }
+
+  [class$='-value'] {
+    font-size: 1.4em;
+  }
+}