Coding info page & other

Coding info page, login menu & other fixes

reactapp/src/components/DevCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface DeveloperCardProps {
+  avatar: string;
+  name: string;
+  info: string;
+  url: string;
+}
+
+export default function DevCard({ avatar, name, info, url }: DeveloperCardProps) {
+  return (
+    <div className="info-page__dev-card">
+      <div className="dev-card__inner">
+        <div className="dev-card__front">
+          <img src={avatar} alt={name} className="dev-card__avatar" />
+        </div>
+        <div className="dev-card__back">
+          <div>
+            <h3 className='dev-card__name'>{name}</h3>
+            <p className='dev-card__info'>{info}</p>
+          </div>
+          <a className='dev-card__url' href={url} target='_blank' rel="noreferrer">GitHub</a>
+        </div>
+      </div>
+    </div>
+  );
+}

reactapp/src/components/Header.tsx

@@ -138,7 +138,7 @@ export default function Header({ togglePopupMap, onSelectCategory, onSearchChang
                     {/* Код для svg */}
                 </motion.button>
                 <motion.a 
-                    href="/" 
+                    href="info" 
                     className="header__info-a"
                     whileTap={{scale: 0.9}}
                     transition={{duration: 0.2, type: "spring"}}

reactapp/src/components/LoginMenu.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { motion } from "framer-motion";
 
 interface LoginMenuProps {
@@ -6,6 +6,12 @@ interface LoginMenuProps {
 }
 
 export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Element {
+    const [isLoginMode, setIsLoginMode] = useState(true);
+
+    const toggleMode = () => {
+        setIsLoginMode(!isLoginMode);
+    }
+    
     return(
         <>
             <div className="background-blackout" onClick={toggleLoginMenu}></div>
@@ -16,7 +22,7 @@ export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Elem
                             SusMarket <span>ID</span>
                         </h5>
                         <p className="top-container__text">
-                            Войдите с SusMarket ID
+                            {isLoginMode ? 'Войдите с SusMarket ID' : 'Зарегистрируйтесь с SusMarket ID'}
                         </p>
                     </div>
                 </div>
@@ -25,15 +31,16 @@ export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Elem
                     <input type="password" name="userPassword" id="userPassword"  className="popup-login__password-input" placeholder="Пароль"/>
                 </div>
                 <div className="popup-login__bottom-container">
-                    <p className="popup-menu__prompt-url">
-                        У вас нет аккаунта? <u>Зарегестрироваться</u>
+                    <p className="popup-login__prompt-url" onClick={toggleMode}>
+                        {isLoginMode ? 'У вас нет аккаунта? ' : 'У вас есть аккаунт? '}
+                        <u>{isLoginMode ? 'Зарегистрироваться' : 'Войти'}</u>
                     </p>
                     <motion.button 
                         className="popup-login__login-button"
                         whileTap={{scale: 0.98}}
                         transition={{duration: 0.2, type: "spring"}}
                     >
-                        Войти
+                        {isLoginMode ? 'Войти' : 'Зарегистрироваться'}
                     </motion.button>
                 </div>
             </form>