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); // добавляем тень при фокусировке
+    }
+}
+