add selector component

package-lock.json

@@ -1203,6 +1203,74 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/cache": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz",
+      "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.0.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "^4.0.3"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.0.tgz",
+      "integrity": "sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.0.1",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz",
+      "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz",
@@ -9956,6 +10024,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -12584,6 +12657,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-input-autosize": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
+      "integrity": "sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12726,6 +12807,20 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-select": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-4.3.1.tgz",
+      "integrity": "sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.1.1",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-input-autosize": "^3.0.0",
+        "react-transition-group": "^4.3.0"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -14345,6 +14440,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+      "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-select": "^4.3.1",
     "sass": "^1.34.0",
     "web-vitals": "^1.1.2"
   },

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 />
+      <TagSelect />
-      <Description />
+      <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;
+  }
+}