addded email functionality

.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.env

app/_components/Contact/Form.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "@/components/ui/button";
+import { sendMail } from "@/lib/action";
 import { Loader2 } from "lucide-react";
 import React from "react";
 
@@ -14,10 +15,12 @@ const Form = () => {
   const [message, setMessage] = React.useState("");
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
+  const [success, setSuccess] = React.useState<string | null>(null);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLoading(true);
+    setSuccess(null);
     setError(null);
 
     if (!validateName(name)) {
@@ -39,18 +42,9 @@ const Form = () => {
     }
 
     try {
-      const res = await fetch("/api/contact", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ name, email, message }),
-      });
-
-      if (!res.ok) {
-        throw new Error("Something went wrong");
-      }
-
+      const res = await sendMail({ name, email, message });
+      if (!res.success) throw new Error(res.message);
+      setSuccess(res.message);
       setName("");
       setEmail("");
       setMessage("");
@@ -65,6 +59,15 @@ const Form = () => {
     }
   };
 
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      setError(null);
+      setSuccess(null);
+    }, 5000);
+
+    return () => clearTimeout(timeout);
+  }, [error, success]);
+
   return (
     <form
       onSubmit={handleSubmit}
@@ -102,13 +105,24 @@ const Form = () => {
         Get In Touch
         {loading && <Loader2 className="animate-spin ml-2" size={16} />}
       </Button>
-      <p
-        className={`text-red-600 text-sm font-[500] ${
-          error ? "animate-fade-in" : "animate-fade-out"
-        }`}
-      >
-        {error}
-      </p>
+      {error && (
+        <p
+          className={`text-red-600 text-sm font-[500] ${
+            error ? "animate-fade-in" : "animate-fade-out"
+          }`}
+        >
+          {error}
+        </p>
+      )}
+      {success && (
+        <p
+          className={`text-green-600 text-sm font-[500] ${
+            success ? "animate-fade-in" : "animate-fade-out"
+          }`}
+        >
+          {success}
+        </p>
+      )}
     </form>
   );
 };

app/globals.css

@@ -48,14 +48,6 @@ body {
   font-family: var(--font-sora), sans-serif;
 }
 
-.backface-hidden {
-  backface-visibility: hidden;
-}
-
-.preserve-3d {
-  transform-style: preserve-3d;
-}
-
 ::selection {
   background: light-dark(var(--dark), var(--light));
   color: light-dark(var(--light), var(--dark));

lib/action.ts

@@ -0,0 +1,54 @@
+"use server";
+import nodemailer from "nodemailer";
+
+export const sendMail = async ({
+  name,
+  email,
+  message,
+}: {
+  name: string;
+  email: string;
+  message: string;
+}): Promise<{
+  message: string;
+  success: boolean;
+  error: Error | null;
+}> => {
+  const transporter = nodemailer.createTransport({
+    service: "gmail",
+    host: "smtp.gmail.com",
+    secure: true,
+    port: 465,
+    auth: {
+      user: process.env.NODE_EMAIL,
+      pass: process.env.NODE_APP_PASSWORD,
+    },
+  });
+
+  const mailOptions = {
+    to: "[email protected]",
+    subject: `New message from ${name}`,
+    replyTo: "[email protected]",
+    text: `Hey Prosper, ${name} sent you a message: \n${message}.\n Thier Email: ${email}\n Date: ${new Date()}`,
+  };
+
+  return new Promise((resolve, reject) => {
+    transporter.sendMail(mailOptions, function (err, data) {
+      console.log("err", err);
+      console.log("data", data);
+      if (err) {
+        reject({
+          message: "Unable to send email, please try again later",
+          error: err,
+          success: false,
+        });
+      } else {
+        resolve({
+          message: "Email sent, thank you!",
+          success: true,
+          error: null,
+        });
+      }
+    });
+  });
+};

package.json

@@ -18,6 +18,7 @@
     "lucide-react": "^0.446.0",
     "next": "14.2.13",
     "next-themes": "^0.3.0",
+    "nodemailer": "^6.9.15",
     "react": "^18",
     "react-dom": "^18",
     "react-leaflet": "^4.2.1",
@@ -28,6 +29,7 @@
   "devDependencies": {
     "@types/leaflet": "^1.9.12",
     "@types/node": "^20",
+    "@types/nodemailer": "^6.4.16",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",