1 files changed, 38 insertions, 3 deletions
diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx
index 72733f0..9b8040c 100644
--- a/src/pages/AuthPage/AuthPage.tsx
+++ b/src/pages/AuthPage/AuthPage.tsx
@@ -1,12 +1,47 @@
-import React from 'react';
+import React, {useState} from 'react';
+import { Authorization} from '../../types';
 import SignInForm from './SignInForm';
+import {makeStyles} from "@material-ui/core";
+import Registration from "./Registration";
 
 interface PropTypes {
   logIn: (name: string, password: string) => Promise<boolean>;
 }
 
-const AuthPage: React.FC<PropTypes> = ({ logIn }) => {
-  return <SignInForm logIn={logIn} />;
+const useStyles = makeStyles(theme => ({
+  authorize: {
+    display: 'flex',
+    width: 200,
+    justifyContent: 'space-around',
+    margin: '0 auto'
+  }
+}));
+
+const AuthPage: React.FC<PropTypes> = ({logIn}) => {
+  const classes = useStyles();
+  const[authorization,setAuthorization] = useState<Authorization>({authorize: 'signUp'});
+
+  const handleSignUp = () => {
+    setAuthorization({authorize: 'signUp'});
+    console.log(authorization.authorize);
+  };
+
+  const handleRegistration = () => {
+    setAuthorization({authorize: 'registration'});
+    console.log(authorization.authorize);
+  };
+
+  return (
+    <>
+      <div className={classes.authorize}>
+        <div onClick={handleSignUp}>SignUp</div>
+        <div>or</div>
+        <div onClick={handleRegistration}>Registrate</div>
+      </div>
+      { authorization.authorize === 'signUp' && <SignInForm logIn={logIn} /> }
+      { authorization.authorize === 'registration' && <Registration logIn={logIn} /> }
+      </>
+  );
 };
 
 export default AuthPage;