minimal front

src/shared/components/button/button.component.tsx

@@ -1,7 +1,17 @@
+import React, { FormEvent } from 'react';
 import classes from './styles.module.scss';
 
-const Button = () => {
-  return <></>;
+type ButtonProps = {
+  label: string;
+  onClick: (e: FormEvent) => Promise<void>;
+};
+
+const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
+  return (
+    <button className={classes.button} onClick={onClick}>
+      {label}
+    </button>
+  );
 };
 
 export default Button;

src/shared/components/button/index.ts

@@ -1 +1 @@
-export { default as Button} from './button.component';
+export { default as Button } from './button.component';

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

@@ -0,0 +1,20 @@
+.button {
+    background-color: rgba(255, 255, 255, 0.2); // прозрачный белый фон
+    border: 2px solid var(--primary-white); // белая обводка
+    border-radius: 8px; // закруглённые углы
+    color: var(--primary-white); // белый текст
+    padding: 10px 20px; // внутренних отступов
+    font-size: 16px; // размер шрифта
+    cursor: pointer; // курсор при наведении
+    transition: background-color 0.3s ease; // плавный переход фона
+  
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.4); // изменение цвета фона при наведении
+    }
+  
+    &:focus {
+        outline: none; // убираем стандартный контур при фокусировке
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); // добавляем тень при фокусировке
+    }
+}
+  

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); // белый текст в выпадающем списке
+    }
+  }
+