feat: ContactUs Form

.env

@@ -0,0 +1 @@
+ZOHO_PASS=qKppXZmPRR8q

app/api/health/route.ts

@@ -1,3 +0,0 @@
-export async function GET() {
-  return Response.json({ status: "ok" })
-}

app/api/routes/mailTransporter.ts

@@ -0,0 +1,21 @@
+const nodemailer = require("nodemailer")
+
+export interface MailOptions {
+  from: string
+  to: string
+}
+
+export const transporter = nodemailer.createTransport({
+  host: "smtp.zoho.com",
+  port: 465,
+  secure: true,
+  auth: {
+    user: "keshawa.vizolelabs.com",
+    pass: process.env.ZOHO_PASS,
+  },
+})
+
+export const mailOptions: MailOptions = {
+  from: "Keshawa Anuhas <keshawa.vizolelabs.com>",
+  to: "Keshawa Anuhas <keshawa.vizolelabs.com>",
+}

app/api/routes/route.ts

@@ -0,0 +1,19 @@
+import { mailOptions, transporter } from "./mailTransporter"
+
+import { NextResponse } from "next/server"
+
+export async function post(req: any) {
+  const data = await req.json()
+
+  try {
+    await transporter.sendMail({
+      ...mailOptions,
+      subject: data.subject,
+      text: `Email: ${data.email}\n\n${data.message}`,
+    })
+    return NextResponse.json({ success: true })
+  } catch (error: any) {
+    console.error(error)
+    return NextResponse.json({ error: error.message }, { status: error.status })
+  }
+}

components/Button/Button.tsx

@@ -88,7 +88,7 @@ const button = cva(["inline-flex", "items-center", "rounded-xl", "text-center",
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof button> {
   underline?: boolean
-  href: string
+  href?: string
 }
 
 export function Button({ className, intent, size, underline, ...props }: ButtonProps) {

components/ContactUs/ContactUs.tsx

@@ -1,6 +1,58 @@
+"use client"
+
 import { Button } from "components/Button/Button"
+import { useState } from "react"
 import MoveUpWhenVisible from "utils/ScrollAnimations/MoveUpOnScroll"
+
+interface ResponseData {
+  success: boolean
+  error: string
+}
+
 export default function ContactUs() {
+  const [formData, setFormData] = useState({
+    email: "",
+    subject: "",
+    message: "",
+  })
+
+  const [submiting, setSubmiting] = useState(false)
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+
+    setFormData({
+      ...formData,
+      [name]: value,
+    })
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setSubmiting(true)
+
+    const response = await fetch("/api/mail", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        accept: "application/json",
+      },
+      body: JSON.stringify(formData),
+    })
+
+    //const { success, error }: { success: any; error: any } = await response.json()
+
+    const { success, error } = (await response.json()) as ResponseData
+
+    if (success) {
+      alert("Message sent!")
+    } else {
+      alert(error)
+    }
+
+    setSubmiting(false)
+  }
+
   return (
     <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
       <MoveUpWhenVisible>
@@ -15,7 +67,7 @@ export default function ContactUs() {
         </p>
       </MoveUpWhenVisible>
       <MoveUpWhenVisible>
-        <form action="#" className="space-y-8">
+        <form action="#" className="space-y-8" onSubmit={handleSubmit}>
           <div>
             <label htmlFor="email" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
               Your email
@@ -23,6 +75,7 @@ export default function ContactUs() {
             <input
               type="email"
               id="email"
+              onChange={handleInputChange}
               className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder="name@gmail.com"
               required
@@ -34,6 +87,7 @@ export default function ContactUs() {
             </label>
             <input
               type="text"
+              onChange={handleInputChange}
               id="subject"
               className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300  bg-homeBg2 p-3 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder="Let us know how we can help you"
@@ -45,6 +99,7 @@ export default function ContactUs() {
               Your message
             </label>
             <textarea
+              onChange={handleInputChange}
               id="message"
               rows={6}
               className="block w-full rounded-lg border border-gray-300  bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
@@ -53,7 +108,6 @@ export default function ContactUs() {
           </div>
           <Button
             type="submit"
-            href="#"
             className="rounded-lg bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
           >
             Send message

package.json

@@ -59,8 +59,10 @@
     "aos": "^2.3.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "dotenv": "^16.4.5",
     "flowbite-react": "^0.9.0",
     "framer-motion": "^11.0.25",
+    "fs": "^0.0.1-security",
     "gsap": "^3.12.5",
     "lodash": "^4.17.21",
     "next": "^14.0.3",