blob: 71ec4801f13195c7ccaf1f9d3639bdc99301a4ec (
plain) (
blame)
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
"use client";
import { FormEvent, useState } from "react";
import formSubmitAction from "./formSubmitAction";
import { useToast } from "@repo/ui/shadcn/use-toast";
import { Loader } from "lucide-react";
function EmailInput() {
const [email, setEmail] = useState("");
const { toast } = useToast();
const [loading, setLoading] = useState(false);
return (
<form
onSubmit={async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setLoading(true);
const value = await formSubmitAction(email, "token" as string);
if (value.success) {
setEmail("");
toast({
title: "You are now on the waitlist! 🎉",
description:
"We will notify you when we launch. Check your inbox and spam folder for a surprise! 🎁",
});
} else {
console.error("email submission failed: ", value.value);
toast({
variant: "destructive",
title: "Uh oh! Something went wrong.",
description: `${value.value}`,
});
}
setLoading(false);
}}
className="flex w-full items-center justify-center gap-2"
>
<div
className={`transition-width z-20 rounded-2xl bg-glass-gradient backdrop-blur-sm dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] border-[1px] border-white/5 from-gray-200/70 to-transparent p-[0] duration-300 ease-in-out ${email ? "w-[90%] md:w-[42%]" : "w-full md:w-1/2"}`}
>
<input
type="email"
name="email"
className={`transition-width py-4 bg-page-gradient flex w-full items-center rounded-xl border-white/5 bg-transparent px-4 outline-none duration-300 focus:outline-none`}
placeholder="Enter your email"
value={email}
required
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div
className="cf-turnstile"
data-sitekey="0x4AAAAAAAakohhUeXc99J7E"
></div>
{email && (
<button
type="submit"
className="transition-width rounded-xl z-20 bg-gray-700 p-4 text-white duration-300"
>
{loading ? (
<Loader className="h-6 w-6 animate-spin" />
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-6 w-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
/>
</svg>
)}
</button>
)}
</form>
);
}
export default EmailInput;
|