feat: init sign up page

front/pages/index.tsx

@@ -5,7 +5,7 @@ import Layout from "../components/ui/layout";
 const Home: NextPage = () => {
   return (
     <div>
-      <Layout>
+      <Layout title="Index">
         <Title>Home</Title>
       </Layout>
     </div>

front/pages/login.tsx

@@ -8,7 +8,8 @@ const Login = () => {
 
   const handleSubmit = (e: any) => {
     e.preventDefault();
-    console.log(email, password);
+    console.log({ email, password });
+    alert(JSON.stringify({ email, password }));
   };
 
   const handleEmailChange = (e: any) => {
@@ -21,7 +22,7 @@ const Login = () => {
 
   return (
     <div>
-      <Layout>
+      <Layout title="Login">
         <Title>Login</Title>
 
         <form>

front/pages/signup.tsx

@@ -3,10 +3,43 @@ import Layout from "../components/ui/layout";
 import { Title } from "../components/ui/styles/title";
 
 const SignUp = () => {
-  return <div>
-  <Layout>
-    <Title>Sign up </Title>
-  </Layout>
-</div>;
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [username, setUsername] = React.useState("");
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    console.log({ email, password, username });
+    alert(JSON.stringify({ email, password, username }));
+  };
+
+  const handleEmailChange = (e: any) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e: any) => {
+    setPassword(e.target.value);
+  };
+
+  const handleUsernameChange = (e: any) => {
+    setUsername(e.target.value);
+  };
+
+  return (
+    <div>
+      <Layout title="Sign up">
+        <Title>Sign up </Title>
+
+        <form>
+          <input onChange={handleUsernameChange} type="text" placeholder="username" />
+          <input onChange={handleEmailChange} type="text" placeholder="email" />
+          <input onChange={handlePasswordChange} type="password" placeholder="password" />
+          <button onClick={handleSubmit} type="submit">
+            Sign up
+          </button>
+        </form>
+      </Layout>
+    </div>
+  );
 };
 export default SignUp;