_105import { useRouter } from "next/navigation";
_105import { useState } from "react";
_105import { sendEmail } from "../_actions";
_105const SendEmailForm = () => {
_105 const [isSubmitted, setIsSubmitted] = useState(false);
_105 const [to, setTo] = useState("");
_105 const [from, setFrom] = useState("");
_105 const router = useRouter();
_105 const handleRefresh = () => {
_105 setIsSubmitted(false);
_105 console.log(isSubmitted);
_105 async function action(data: FormData) {
_105 const to = data.get("to");
_105 if (typeof to !== "string" || !to) return;
_105 const subject = data.get("subject");
_105 if (typeof subject !== "string" || !subject) return;
_105 const name = data.get("name");
_105 if (typeof name !== "string" || !name) return;
_105 const text = data.get("text");
_105 if (typeof text !== "string" || !text) return;
_105 const from = data.get("from");
_105 if (typeof from !== "string" || !from) return;
_105 //send the event to trigger the email.
_105 //You can use the returned event with the @trigger.dev/react package if you want more detailed Job progress in your UI
_105 const event = await sendEmail(to, subject, name, text, from);
_105 setIsSubmitted(true);
_105 className="flex flex-col gap-y-4 px-4 pb-4 sm:w-96 sm:px-0"
_105 placeholder="Enter a 'to' email address"
_105 className="rounded p-1.5 text-slate-800"
_105 onChange={(e) => setTo(e.target.value)}
_105 placeholder="Enter a subject"
_105 className="rounded p-1.5 text-slate-800"
_105 placeholder="Enter the name of the recipient"
_105 className="rounded p-1.5 text-slate-800"
_105 placeholder="Enter email text"
_105 className="rounded p-1.5 text-slate-800"
_105 placeholder="Enter a 'from' email address"
_105 className="rounded p-1.5 text-slate-800"
_105 onChange={(e) => setFrom(e.target.value)}
_105 <p className="text-sm text-gray-500">
_105 ⚠️ The "from" email address must be a verified domain in your
_105 Resend account to work.
_105 disabled={!isValidEmail(to) || !isValidEmail(from)}
_105 className="mt-2 h-10 w-full rounded bg-indigo-600 font-bold transition hover:bg-indigo-500 disabled:opacity-20"
_105 <div className="flex gap-2">
_105 <p>✅ Email sent! - </p>
_105 onClick={handleRefresh}
_105 className="text-slate-300 underline underline-offset-2 transition hover:text-slate-100"
_105function isValidEmail(email: string) {
_105 return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
_105export default SendEmailForm;