feat: resend integrated feedback form

.env.example

@@ -1,2 +1,3 @@
 CONTENTFUL_SPACE_ID=
-CONTENTFUL_ACCESS_TOKEN=
+CONTENTFUL_ACCESS_TOKEN=
+RESEND_API_KEY=

package.json

@@ -33,6 +33,7 @@
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.0.7",
+        "@react-email/components": "^0.0.14",
         "@tailwindcss/typography": "^0.5.10",
         "@tanstack/query-sync-storage-persister": "^5.8.3",
         "@tanstack/react-query": "^5.8.4",
@@ -65,6 +66,7 @@
         "react-hook-form": "^7.49.3",
         "react-textarea-autosize": "^8.5.3",
         "resend": "^3.1.0",
+        "sonner": "^1.4.0",
         "tailwind-merge": "^2.0.0",
         "tailwindcss": "3.3.5",
         "tailwindcss-animate": "^1.0.7",

src/app/api/send/route.ts

@@ -0,0 +1,38 @@
+import EmailTemplate, { EmailAdminTemplate } from "@/components/EmailTemplate";
+import { FeedbackSchema, TFeedbackSchema } from "@/lib/schemas";
+import { Resend } from "resend";
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function POST(req: Request) {
+    const { values } = await req.json();
+
+    if (!FeedbackSchema.safeParse(values).success)
+        return Response.json({ error: "Invalid fields" }, { status: 401 });
+
+    const validatedFormFields = values as TFeedbackSchema;
+
+    try {
+        const data = await Promise.all([
+            resend.emails.send({
+                from: "SyllabusX <mail@syllabusx.live>",
+                to: ["iboard990@gmail.com"],
+                subject: "New response has arrived",
+                react: EmailAdminTemplate(
+                    validatedFormFields
+                ) as React.ReactElement,
+            }),
+            resend.emails.send({
+                from: "SyllabusX <mail@syllabusx.live>",
+                to: [validatedFormFields.email],
+                subject: "Thanks for the feedback",
+                react: EmailTemplate({
+                    name: validatedFormFields.name,
+                }) as React.ReactElement,
+            }),
+        ]);
+        return Response.json(data);
+    } catch (error) {
+        return Response.json({ error });
+    }
+}

src/app/contact-us/page.tsx

@@ -50,25 +50,23 @@ const Page: FC<pageProps> = ({}) => {
                     </p>
                 </div>
             </div>
-            <div className="grid items-center gap-5 py-10 md:grid-cols-2 md:justify-center">
-                <div className="flex flex-col gap-5">
-                    <a
-                        href="https://www.instagram.com/syllabusx_.live/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className={cn(buttonVariants({ className: "gap-2" }))}
-                    >
-                        DM on Instagram <Instagram className="h-4 w-4" />
-                    </a>
-                    <a
-                        href="mailto:iboard990@gmail.com"
-                        target="_blank"
-                        className={cn(buttonVariants({ className: "gap-2" }))}
-                    >
-                        Mail us <Mail className="h-4 w-4" />
-                    </a>
-                </div>
+            <div className="grid items-center gap-5 py-10 md:grid-cols-3 md:justify-center">
                 <FeedbackFormTrigger />
+                <a
+                    href="https://www.instagram.com/syllabusx_.live/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={cn(buttonVariants({ className: "gap-2" }))}
+                >
+                    DM on Instagram <Instagram className="h-4 w-4" />
+                </a>
+                <a
+                    href="mailto:iboard990@gmail.com"
+                    target="_blank"
+                    className={cn(buttonVariants({ className: "gap-2" }))}
+                >
+                    Mail us <Mail className="h-4 w-4" />
+                </a>
             </div>
         </LayoutWrapper>
     );