добавляет модальное окно, анимации

frontend/.eslintrc.cjs

@@ -1,18 +1,19 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    root: true,
+    env: {browser: true, es2020: true},
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
     ],
-  },
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh'],
+    rules: {
+        'react-refresh/only-export-components': [
+            'warn',
+            {allowConstantExport: true},
+        ],
+        "@typescript-eslint/no-explicit-any": "off"
+    },
 }

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/greensock": "^1.15.32",
     "gsap": "^3.12.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
@@ -28,6 +29,7 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "sass": "^1.69.5",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   }

frontend/src/UIComponents/modalWindow/ModalWindow.tsx

@@ -0,0 +1,39 @@
+import React, {MutableRefObject, useEffect, useRef} from 'react';
+import {PropsWithChildren} from "react";
+import gsap from 'gsap';
+import "./modalWindow.scss"
+
+interface ModalWindowProps {
+    body: React.ReactNode,
+    windowContentStyles: string,
+    onSubmit?: () => void,
+    onClose: () => void,
+}
+
+const ModalWindow: React.FC<ModalWindowProps> =
+    ({body, onClose, windowContentStyles}: PropsWithChildren<ModalWindowProps>) => {
+        const el: MutableRefObject<any> | gsap.core.Timeline = useRef();
+
+        useEffect(() => {
+            const onKeypress = (e: KeyboardEvent) => e?.key === "Esc" || e.key === "Escape" ? onClose() : null;
+
+            document.addEventListener('keyup', onKeypress);
+            gsap.fromTo('.modal-window', {opacity: 0}, {opacity: 1, duration: 0.2})
+
+            return () => {
+                document.removeEventListener('keyup', onKeypress);
+            };
+        }, [onClose]);
+
+        return (
+            <div className="modal-window" onClick={onClose} ref={el}>
+                <div className={`modal-window__content ${windowContentStyles}`}
+                     onClick={(e) => e.stopPropagation()}>
+                    <div className="modal-window__body" children={body}></div>
+                    <div className="modal-window__btn" onClick={() => onClose()}></div>
+                </div>
+            </div>
+        );
+    };
+
+export default ModalWindow;

frontend/src/UIComponents/modalWindow/modalWindow.scss

@@ -0,0 +1,22 @@
+.modal-window {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  backdrop-filter: blur(5px);
+}
+
+.modal-window__content {
+  color: black;
+  padding: 25px;
+  background: #4e4c4c;
+  border-radius: 15px;
+  min-width: 250px;
+  position: relative;
+}

frontend/src/components/welcomePage/WelcomePage.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {useNavigate} from "react-router-dom";
+import ModalWindow from "../../UIComponents/modalWindow/ModalWindow.tsx";
 
 const WelcomePage: React.FC = () => {
     const navigateTo = useNavigate()
+    const [isModalWindow, setIsModalWindow] = useState(false)
+
+    const setShowModal = () => setIsModalWindow(!isModalWindow)
 
     return (
         <div>
             <h1>Adaptify</h1>
             <button onClick={() => navigateTo("/authentication")}>Авторизоваться</button>
+            {isModalWindow ? <ModalWindow body={"asd"} windowContentStyles={""} onClose={setShowModal}/> : ""}
+            <button onClick={setShowModal}>Включить модалку</button>
         </div>
     );
 };

frontend/tsconfig.json

@@ -5,6 +5,10 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": [
+      "es6-promise",
+      "webpack-env"
+    ],
 
     /* Bundler mode */
     "moduleResolution": "bundler",