"use client"; import { useRef, useState } from "react"; import { Button } from "../ui/button"; import { Input } from "../ui/input"; import Image from "next/image"; import { Happy_Monkey } from "next/font/google"; import { Mail } from "lucide-react"; import HCaptcha from "@hcaptcha/react-hcaptcha"; const happyMonkey = Happy_Monkey({ preload: true, weight: "400", subsets: ["latin"] }); const Newsletter = () => { const [submission, setSubmission] = useState< "idle" | "loading" | "success" | "error" >("idle"); const [input, setInput] = useState(""); const [captchaToken, setCaptchaToken] = useState(null); const [showCaptcha, setShowCaptcha] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); // Added this line const buttonRef = useRef(null); const hcaptchaRef = useRef(null); const handleCaptcha = async (token: string) => { setCaptchaToken(token); setShowCaptcha(false); await handleSubmit(token); }; const handleSubmit = async (token: string | null) => { if (!input || !token || isSubmitting) return; setIsSubmitting(true); setSubmission("loading"); try { const response = await fetch("/api/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: input, captchaToken: token }) }); if (response.ok) { setSubmission("success"); setInput(""); } else { setSubmission("error"); } } catch (error) { console.error("Error subscribing:", error); setSubmission("error"); } finally { setIsSubmitting(false); } }; const handleSubscribeClick = () => { if (!input) return; setShowCaptcha(true); }; return (

Join The Newsletter!

Subscribe to our newsletter for updates. We promise no spam emails will be sent

e.preventDefault()} >
setInput(e.target.value)} placeholder="Email address" required type="email" className="flex-1 text-secondary-foreground text-sm sm:text-base outline-none placeholder-[#4B4C52] group-focus-within:placeholder-muted bg-transparent placeholder:transition-colors placeholder:duration-300 border-none" />
see here {submission === "idle" && "Subscribe Now"} {submission === "loading" && (

Subscribing...

)} {submission === "success" && (

🎉 Subscribed successfully...

)} {submission === "error" && (

😥 Something went wrong...

)}
{showCaptcha && (
)}

); }; export default Newsletter;