-
Notifications
You must be signed in to change notification settings - Fork 0
/
TextField.tsx
69 lines (63 loc) · 1.66 KB
/
TextField.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
"use client";
import React, { useEffect, useState } from "react";
import { TextField as MuiTextField, Stack, Typography } from "@mui/material";
import Button from "./Button";
import { useRouter } from "next/navigation";
const validateEmail = (email: string) => {
return Boolean(
email
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
)
);
};
const TextField = () => {
const [mail, setMail] = useState("");
const [error, setError] = useState(false);
const router = useRouter();
useEffect(() => {
if (mail.length > 0) {
setError(!validateEmail(mail));
} else setError(false);
}, [mail]);
return (
<>
<Stack
direction="row"
sx={{ width: "100%" }}
alignItems={"center"}
justifyContent={"space-between"}
>
<Typography
component={"label"}
htmlFor="text-field"
variant="subtitle1"
>
Email Address
</Typography>
{error && (
<Typography variant="subtitle2" component={"label"}>
Valid Email Required
</Typography>
)}
</Stack>
<MuiTextField
error={error}
placeholder="email@company.com"
value={mail}
onChange={(e) => setMail(e.target.value)}
id="text-field"
/>
<Button
text={"Subscribe to monthly newsletter"}
onClick={() =>
router.push(`/success?mail=${mail}`, {
scroll: false,
})
}
/>
</>
);
};
export default TextField;