minimal front

src/shared/components/selector/selector.component.tsx

@@ -1,18 +1,51 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import classes from './styles.module.scss';
 
 type SelectorProps = {
-  handleSetValue: () => void;
+  field: string;
+  handleSetValue: (field: string, value: string) => void;
   list: string[];
 };
 
-const Selector: FC<SelectorProps> = ({ handleSetValue, list }) => {
+const Selector: FC<SelectorProps> = ({ field, handleSetValue, list }) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    handleSetValue(field, value);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    handleSetValue(field, value);
+  };
+
   return (
-    <section className={classes.selector}>
-      {list.map((item) => (
-        <option>{item}</option>
-      ))}
-    </section>
+    <div className={classes.selectorContainer}>
+      <select
+        className={classes.selector}
+        onChange={handleChange}
+        value={inputValue}
+      >
+        <option value="" disabled>
+          Select an option
+        </option>
+        {list.map((item, index) => (
+          <option key={index} value={item}>
+            {item}
+          </option>
+        ))}
+      </select>
+      <input
+        type="text"
+        className={classes.input}
+        value={inputValue}
+        onChange={handleInputChange}
+        placeholder="Or type your own"
+      />
+    </div>
   );
 };
 

src/shared/components/selector/styles.module.scss

@@ -0,0 +1,15 @@
+.selector {
+    background-color: rgba(255, 255, 255, 0.2); // прозрачный белый
+    border: 2px solid var(--primary-white); // белая рамка
+    border-radius: 8px; // закруглённые углы
+    color: var(--primary-white); // белый текст
+    padding: 8px;
+    font-size: 16px;
+    cursor: pointer;
+  
+    option {
+      background-color: rgba(255, 255, 255, 0.2); // цвет фона для выпадающего списка
+      color: var(--primary-white); // белый текст в выпадающем списке
+    }
+  }
+