1"use client";
2import { useFormState, useFormStatus } from "react-dom";
3import { SectionHeader } from "../shared/SectionHeader";
4import { sendEmailwithBrevoSmtpAction,ContactFormState } from "./utils/brevo-nodemailer";
5import { testAction } from "./utils/test-action";
6import { useEffect, useRef, useState } from "react";
7import { Loader } from "lucide-react";
8import { SubmitButton } from "./SubmitButton";
9
10
11interface ContactMeFormProps {
12
13}
14
15
16export function ContactMeForm({}:ContactMeFormProps){
17
18 const [formState, formAction] = useFormState<ContactFormState>(sendEmailwithBrevoSmtpAction, {
19 message: "",
20 error: false,
21 success: false,
22 fieldValues: {
23 sender_name: "",
24 sender_email: "",
25 sender_message: "",
26 },
27 });
28const [status,setStatus] = useState({
29 error:formState.error,
30 success:formState.success
31})
32const formRef= useRef<HTMLFormElement>(null)
33useEffect(()=>{
34if(formState?.success){
35 formRef.current?.reset()
36}
37setStatus((prev) => {
38 return {error:formState.error,success:formState.success};
39});
40const messageTimeout = setTimeout(()=>{
41
42 if(formState?.error){
43 setStatus((prev)=>{
44 return {...prev,error:false}
45 })
46 }
47 if(formState?.success){
48 setStatus((prev) => {
49 return { ...prev, success: false };
50 });
51 }
52},8000)
53return ()=>{
54 clearTimeout(messageTimeout)
55}
56 },[formState])
57
58
59
60return (
61 <div className="w-full h-full min-h-screen flex flex-col items-center justify-center rounded-lg animate-in fade-in zoom-in duration-500 ">
62 <SectionHeader heading="Talk to me" id="contact" />
63 <form
64 id="contact-form"
65 ref={formRef}
66 action={formAction}
67 className="flex flex-col justify-center items-center gap-4 w-[95%] md:w-[70%] lg:w-[60%] min-w-[60%] h-fit glass p-5 rounded-xl ">
68 {status?.error && (
69 <div
70 className="bg-base-300 text-error border border-error p-2
71 text-balance rounded-xl animate-in fade-in zoom-in duration-700">
72 {formState?.message}
73 </div>
74 )}
75 {status?.success && (
76 <div
77 className="bg-base-300 text-success p-2 border border-success text-center text-balance
78 rounded-xl animate-in fade-in zoom-in duration-700">
79 {formState?.message}
80 </div>
81 )}
82
83 <div className="w-full flex flex-col gap-1">
84 <label htmlFor="sender_name" className="bg-base-200 rounded-xl p-1 w-fit">
85 Name
86 </label>
87 <input
88 id="sender_name"
89 type="text"
90 placeholder="name"
91 name="sender_name"
92 className="input"
93 />
94 </div>
95
96 <div className="w-full flex flex-col gap-1">
97 <label htmlFor="sender_message" className="bg-base-200 rounded-xl p-1 w-fit">
98 Message
99 </label>
100 <textarea
101 id="sender_message"
102 name="sender_message"
103 required
104 className="textarea min-h-40"
105 placeholder="Message"
106 />
107 </div>
108
109 <div className="w-full flex flex-col gap-1">
110 <label htmlFor="sender_contact" className="text-xs bg-base-200 rounded-xl p-1 w-fit">
111 How can i reach you (optional)
112 </label>
113 <input
114 id="sender_contact"
115 placeholder="contact information"
116 type="text"
117 name="sender_contct"
118 className="input"
119 />
120 </div>
121 <SubmitButton />
122 </form>
123 </div>
124);
125}
126
