47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
|
import { useMutation } from "blitz";
|
||
|
|
import { useForm } from "react-hook-form";
|
||
|
|
|
||
|
|
import joinWaitlist from "../mutations/join-waitlist";
|
||
|
|
|
||
|
|
type Form = {
|
||
|
|
email: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function CTAForm() {
|
||
|
|
const [joinWaitlistMutation] = useMutation(joinWaitlist);
|
||
|
|
const {
|
||
|
|
handleSubmit,
|
||
|
|
register,
|
||
|
|
formState: { isSubmitted },
|
||
|
|
} = useForm<Form>();
|
||
|
|
const onSubmit = handleSubmit(async ({ email }) => {
|
||
|
|
if (isSubmitted) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
return joinWaitlistMutation({ email });
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form onSubmit={onSubmit} className="mt-8">
|
||
|
|
{isSubmitted ? (
|
||
|
|
<p className="text-center md:text-left mt-2 opacity-75 text-green-900 text-md">
|
||
|
|
You're on the list! We will be in touch soon
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<div className="flex flex-col sm:flex-row justify-center max-w-sm mx-auto sm:max-w-md md:mx-0">
|
||
|
|
<input
|
||
|
|
{...register("email")}
|
||
|
|
type="email"
|
||
|
|
className="form-input w-full mb-2 sm:mb-0 sm:mr-2 focus:outline-none focus:ring-primary-500 focus:border-primary-500"
|
||
|
|
placeholder="Enter your email address"
|
||
|
|
/>
|
||
|
|
<button type="submit" className="btn text-white bg-primary-500 hover:bg-primary-400 flex-shrink-0">
|
||
|
|
Request access
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
}
|