integrate resend

app/components/contact.tsx

@@ -13,6 +13,9 @@ import { z } from "zod";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 
+// @actions
+import { sendInquiry } from "@/lib/actions";
+
 const formSchema = z.object({
   name: z.string().min(3, {
     message: "Name must be at least 3 characters long",
@@ -47,26 +50,22 @@ export function Contact() {
   async function onSubmit(values: z.infer<typeof formSchema>) {
     setIsLoading(true);
 
-    const formData = new FormData();
-
-    formData.append("name", values.name);
-    formData.append("email", values.email);
-    formData.append("message", values.message);
+    const response = await sendInquiry(values);
 
-    // if (response.status === 200) {
-    //   reset();
-    //   setError(null);
-    //   setIsSuccess(true);
-    //   setIsLoading(false);
+    if (response.sent) {
+      reset();
+      setError(null);
+      setIsSuccess(true);
+      setIsLoading(false);
 
-    //   setTimeout(() => {
-    //     setIsSuccess(false);
-    //   }, 3000);
-    // } else {
-    //   setIsLoading(false);
-    //   setIsSuccess(false);
-    //   setError(response.message);
-    // }
+      setTimeout(() => {
+        setIsSuccess(false);
+      }, 3000);
+    } else {
+      setIsLoading(false);
+      setIsSuccess(false);
+      setError("Could not send message. Please try again later.");
+    }
   }
 
   return (

components/email-template.tsx

@@ -0,0 +1,17 @@
+export function EmailTemplate({
+  name,
+  email,
+  message,
+}: {
+  name: string;
+  email: string;
+  message: string;
+}) {
+  return (
+    <div>
+      <p>Name: {name}</p>
+      <p>Email: {email}</p>
+      <p>Message: {message}</p>
+    </div>
+  );
+}

lib/actions.ts

@@ -0,0 +1,36 @@
+"use server";
+
+// @components
+import { EmailTemplate } from "@/components/email-template";
+
+// @utils
+import { Resend } from "resend";
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function sendInquiry({
+  name,
+  email,
+  message,
+}: {
+  name: string;
+  email: string;
+  message: string;
+}) {
+  try {
+    const { error } = await resend.emails.send({
+      from: process.env.RESEND_FROM_EMAIL!,
+      to: [process.env.RESEND_TO_EMAIL!],
+      subject: "New Inquiry from sajadevo.com",
+      react: EmailTemplate({ name, email, message }),
+    });
+
+    if (error) {
+      return { error: error.message, sent: false };
+    }
+
+    return { error: null, sent: true };
+  } catch (error: any) {
+    throw new Error(error.message);
+  }
+}

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "3.9.1",
-    "@radix-ui/react-tooltip": "^1.1.6",
+    "@radix-ui/react-tooltip": "1.1.6",
     "@tailwindcss/postcss": "next",
     "clsx": "2.1.1",
     "lucide-react": "0.469.0",
@@ -24,6 +24,7 @@
     "react-dom": "19.0.0",
     "react-fast-marquee": "1.6.5",
     "react-hook-form": "7.54.1",
+    "resend": "4.0.1",
     "tailwind-merge": "2.5.5",
     "zod": "3.24.1"
   },

tsconfig.json

@@ -19,8 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"],
-      "@payload-config": ["./payload.config.ts"]
+      "@/*": ["./*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],