Toast for error and succes message

actions/sendEmail.ts

@@ -24,9 +24,9 @@ export const sendEmail = async (formData: FormData) =>{
             error: "Invalid Message"
         }
     }
-
+    let data;
     try {
-        await resend.emails.send({
+        data = await resend.emails.send({
             from: 'Contact Form <[email protected]>',
             to: '[email protected]',
             subject: "Message from contact form",
@@ -39,5 +39,9 @@ export const sendEmail = async (formData: FormData) =>{
           };
     }
 
+    return {
+        data
+    }
+
 
 }

app/layout.tsx

@@ -2,6 +2,7 @@ import Header from '@/components/Header'
 import './globals.css'
 import { Inter } from 'next/font/google'
 import ActiveSectionContextProvider from '@/context/ActiveSectionContextProvider'
+import { Toaster } from 'react-hot-toast'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -24,6 +25,7 @@ export default function RootLayout({
         <ActiveSectionContextProvider>
           <Header />
           {children}
+          <Toaster position='top-right' />
         </ActiveSectionContextProvider>
         </body>
     </html>

components/Contact.tsx

@@ -5,6 +5,9 @@ import { FaPaperPlane } from 'react-icons/fa'
 import { motion } from 'framer-motion'
 import { useSectionInView } from '@/lib/hooks';
 import { sendEmail } from '@/actions/sendEmail';
+import SubmitBtn from './SubmitBtn';
+import toast from 'react-hot-toast';
+
 
 export default function Contact() {
 
@@ -34,7 +37,13 @@ export default function Contact() {
         </p>
         <form className='mt-10 flex flex-col' 
         action={async formData => {
-            await sendEmail(formData);
+           const {data, error} =  await sendEmail(formData);
+           if(error){
+            toast.error(error);
+            return;
+           }
+
+           toast.success("Email sent successfully!")
         }}>
             <input 
             name='senderEmail'
@@ -44,9 +53,7 @@ export default function Contact() {
             required 
             maxLength={500}/>
             <textarea name='message' required maxLength={1000} placeholder='Your message...' className='h-52 my-3 rounded-lg borderBlack p-4'/>
-            <button type='submit' className='group flex items-center justify-center gap-2 h-[3rem] w-[8rem] bg-gray-900 text-white rounded-full outline-none transition-all focus:scale-110 hover:scale-110 
-            active:scale-105'>
-                Submit <FaPaperPlane className='text-xs opacity-70 transition-all group-hover:translate-x-1 group-hover:-translate-y-1'/>{" "}</button>
+            <SubmitBtn />
         </form>
     </motion.section>
   )

components/SubmitBtn.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { experimental_useFormStatus as useFormStatus } from 'react-dom';
+import { FaPaperPlane } from 'react-icons/fa';
+export default function SubmitBtn() {
+    const { pending } = useFormStatus();
+
+    return (
+      <button
+        type="submit"
+        className="group flex items-center justify-center gap-2 h-[3rem] w-[8rem] bg-gray-900 text-white rounded-full outline-none transition-all focus:scale-110 hover:scale-110 hover:bg-gray-950 active:scale-105 disabled:scale-100 disabled:bg-opacity-65"
+        disabled={pending}
+      >
+        {pending ? (
+          <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-white"></div>
+        ) : (
+          <>
+            Submit{" "}
+            <FaPaperPlane className="text-xs opacity-70 transition-all group-hover:translate-x-1 group-hover:-translate-y-1" />{" "}
+          </>
+        )}
+      </button>
+    );
+  }