sdy

Create Auth.js

1 +import React, { useState } from "react";
2 +import styled from "styled-components";
3 +import Input from "../Components/Input";
4 +import Button from "../Components/Button";
5 +
6 +const Wrapper = styled.div``;
7 +
8 +const Box = styled.div``;
9 +
10 +const StateChanger = styled(Box)``;
11 +
12 +const Link = styled.span``;
13 +
14 +const Form = styled(Box)``;
15 +
16 +export default () => {
17 + const [action, setAction] = useState("logIn");
18 +
19 + return (
20 + <Wrapper>
21 + <Form>
22 + {action === "logIn" ? (
23 + <form>
24 + <Input placeholder={"Email"} type="email" />
25 + <Input placeholder={"Password"} type="password" />
26 + <Button text={"Log In"} />
27 + </form>
28 + ) : (
29 + <form>
30 + <Input placeholder={"Email"} type="email" />
31 + <Input placeholder={"Password"} type="password" />
32 + <Input placeholder={"Password for validation"} type="password" />
33 + <Input placeholder={"UserName"} />
34 + <Button text={"Sign Up"} />
35 + </form>
36 + )}
37 + </Form>
38 + <StateChanger>
39 + {action === "logIn" ? (
40 + <>
41 + Don't you have an account ?
42 + <Link onClick={() => setAction("signUp")}> </Link>
43 + </>
44 + ) : (
45 + <>
46 + Did you have an account ?
47 + <Link onClick={() => setAction("logIn")}> </Link>
48 + </>
49 + )}
50 + </StateChanger>
51 + </Wrapper>
52 + );
53 +};