add selector component

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;
+  }
+}