Use withAuth function for email endpoint

Author: shrix1

app/api/mail/route.ts

@@ -1,28 +1,31 @@
-import { Resend } from "resend"
-import { SelectEmailTemplate } from "@/components/email-templates"
-import { NextRequest, NextResponse } from "next/server"
+import { Resend } from "resend";
+import { SelectEmailTemplate } from "@/components/email-templates";
+import { NextRequest, NextResponse } from "next/server";
+import { withAuth } from "@/utils/withAuth";
 
-const resend = new Resend(process.env.RESEND_API_KEY!)
+const resend = new Resend(process.env.RESEND_API_KEY!);
 
-export async function POST(req: NextRequest) {
-  const body = await req.json()
-  const { to, subject, data } = body
-  const EmailTemplate = SelectEmailTemplate(data)
+async function sendEmail(req: NextRequest) {
+  const body = await req.json();
+  const { to, subject, data } = body;
+  const EmailTemplate = SelectEmailTemplate(data);
 
   try {
     const { data, error } = await resend.emails.send({
       from: "Acme <onboarding@resend.dev>", // Pear AI <accounts@pear.ai>
       to: [to],
       subject,
       react: EmailTemplate as JSX.Element,
-    })
+    });
 
     if (error) {
-      return NextResponse.json({ error, status: 500 })
+      return NextResponse.json({ error, status: 500 });
     }
 
-    return NextResponse.json({ message: "Email sent!", data, status: 200 })
+    return NextResponse.json({ message: "Email sent!", data, status: 200 });
   } catch (error) {
-    return NextResponse.json({ error, status: 500 })
+    return NextResponse.json({ error, status: 500 });
   }
 }
+
+export const POST = withAuth(sendEmail);

components/email-templates/email-wrapper.tsx

@@ -10,15 +10,15 @@ import {
   Link,
   Section,
   Heading,
-} from "@react-email/components"
-import * as React from "react"
-import { Tailwind } from "@react-email/tailwind"
+} from "@react-email/components";
+import * as React from "react";
+import { Tailwind } from "@react-email/tailwind";
 
 type EmailWrapperProps = {
-  children: React.ReactNode
-  previewText: string
-  dir?: "ltr" | "rtl"
-}
+  children: React.ReactNode;
+  previewText: string;
+  dir?: "ltr" | "rtl";
+};
 
 const EmailWrapper = ({ children, previewText, dir }: EmailWrapperProps) => {
   return (
@@ -65,7 +65,7 @@ const EmailWrapper = ({ children, previewText, dir }: EmailWrapperProps) => {
         </Body>
       </Tailwind>
     </Html>
-  )
-}
+  );
+};
 
-export default EmailWrapper
+export default EmailWrapper;

components/email-templates/index.ts

@@ -1,4 +1,4 @@
-import WelcomeTemplate from "./welcome-template"
+import WelcomeTemplate from "./welcome-template";
 
 export enum EmailTemplates {
   WELCOME = "WELCOME",
@@ -9,7 +9,7 @@ export function SelectEmailTemplate(data: any) {
     case EmailTemplates.WELCOME:
       return WelcomeTemplate({
         userName: data.userName,
-      })
+      });
 
     // more templates here
   }

components/email-templates/welcome-template.tsx

@@ -1,24 +1,24 @@
-import React from "react"
-import EmailWrapper from "./email-wrapper"
-import { Container, Heading, Text } from "@react-email/components"
+import React from "react";
+import EmailWrapper from "./email-wrapper";
+import { Container, Heading, Text } from "@react-email/components";
 
 const WelcomeTemplate = ({ userName }: { userName: string }) => {
   return (
     <EmailWrapper previewText="Welcome to Pear AI" dir="ltr">
-      <Container className="mx-auto -mt-3 max-w-[600px] rounded-xl bg-white px-8 py-5">
+      <Container className="bg-white mx-auto -mt-3 max-w-[600px] rounded-xl px-8 py-5">
         <Heading as="h1">Hi {userName},</Heading>
         <Heading as="h2">Welcome to Pear AI!</Heading>
         <Text>
           We are excited to have you onboard and look forward to helping you get
           the most out of our product.
         </Text>
         <Text>
-          If you have any questions or need assistance, please don't hesitate to
+          If you have any questions or need assistance, please dont hesitate to
           reach out to us.
         </Text>
       </Container>
     </EmailWrapper>
-  )
-}
+  );
+};
 
-export default WelcomeTemplate
+export default WelcomeTemplate;

components/ui/header.tsx

@@ -27,7 +27,7 @@ export default async function Header() {
             {/* Site branding */}
             <div className="flex w-[14%] flex-row items-center space-x-2 md:w-[36%]">
               {/* Logo */}
-              <Link className="-mt-0.5 dark:invert sm:mt-0" href="/">
+              <Link className="-mt-0.5 sm:mt-0 dark:invert" href="/">
                 <PearDarkLogo />
               </Link>
             </div>