Refactor: Added a react email template and fix the header issue(__@__…

… instead of Tedx Sjec)
TEDx-SJEC · Sep 16, 2024 · 7f4239a · 7f4239a
1 parent c81da52
commit 7f4239a
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 19 deletions.
diff --git a/src/lib/email-template.tsx b/src/lib/email-template.tsx
@@ -1,28 +1,129 @@
 import * as React from "react";
-import { Html, Button } from "@react-email/components";
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Preview,
+  Section,
+  Text,
+  Heading,
+  Button,
+} from "@react-email/components";
+
 interface EmailTemplateProps {
   name: string;
   email: string;
   OTP: string;
 }
 
-export const EmailTemplate = ({
-  name,
-  email,
-  OTP,
-}:EmailTemplateProps) => (
+export const EmailTemplate = ({ name, OTP }: EmailTemplateProps) => (
   <Html>
-    <h1>Hello {name},</h1>
-    <p>Thank you for registering for Tedx 2024.</p>
-    <p>Your One-Time Password (OTP) for email verification is:</p>
-    <h2 style={{ color: "#f44336" }}>{OTP}</h2>
-    <p>
-      Please enter this OTP to complete your registration. The OTP is valid for
-      10 minutes.
-    </p>
-    <p>Thank you!</p>
-    <p>
-      <strong>Tedx SJEC Team</strong>
-    </p>
+    <Head />
+    <Preview>Your OTP for Tedx 2024 Email Verification</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Text style={company}>Tedx SJEC</Text>
+        <Heading style={codeTitle}>Hello {name},</Heading>
+        <Text style={codeDescription}>
+          Thank you for registering for Tedx 2024.
+        </Text>
+        <Text style={codeDescription}>
+          Your One-Time Password (OTP) for email verification is:
+        </Text>
+        <Section style={codeContainer}>
+          <Heading style={codeStyle}>{OTP}</Heading>
+        </Section>
+        <Text style={codeDescription}>
+          Please enter this OTP to complete your registration. The OTP is valid
+          for 10 minutes.
+        </Text>
+        <Section style={buttonContainer}>
+          <Button href="https://www.tedxsjec.in" style={button}>
+            Go to Tedx SJEC
+          </Button>
+        </Section>
+        <Text style={paragraph}>Thank you!</Text>
+        <Text style={paragraph}>
+          <strong>Tedx SJEC Team</strong>
+        </Text>
+      </Container>
+    </Body>
   </Html>
 );
+
+export default EmailTemplate;
+
+const main = {
+  backgroundColor: "#ffffff",
+  fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
+  textAlign: "center" as const,
+};
+
+const container = {
+  backgroundColor: "#ffffff",
+  border: "1px solid #ddd",
+  borderRadius: "5px",
+  marginTop: "20px",
+  width: "480px",
+  maxWidth: "100%",
+  margin: "0 auto",
+  padding: "12% 6%",
+};
+
+const company = {
+  fontWeight: "bold",
+  fontSize: "18px",
+  textAlign: "center" as const,
+};
+
+const codeTitle = {
+  textAlign: "center" as const,
+};
+
+const codeDescription = {
+  textAlign: "center" as const,
+};
+
+const codeContainer = {
+  background: "rgba(0,0,0,.05)",
+  borderRadius: "4px",
+  margin: "16px auto 14px",
+  verticalAlign: "middle",
+  width: "280px",
+  maxWidth: "100%",
+};
+
+const codeStyle = {
+  color: "#000",
+  display: "inline-block",
+  paddingBottom: "8px",
+  paddingTop: "8px",
+  margin: "0 auto",
+  width: "100%",
+  textAlign: "center" as const,
+  letterSpacing: "8px",
+};
+
+const buttonContainer = {
+  margin: "27px auto",
+  width: "auto",
+};
+
+const button = {
+  backgroundColor: "red",
+  borderRadius: "3px",
+  fontWeight: "600",
+  color: "#fff",
+  textAlign: "center" as const,
+  padding: "12px 24px",
+  margin: "0 auto",
+};
+
+const paragraph = {
+  color: "#444",
+  letterSpacing: "0",
+  padding: "0 40px",
+  margin: "0",
+  textAlign: "center" as const,
+};
diff --git a/src/lib/resend-mailer.ts b/src/lib/resend-mailer.ts
@@ -8,7 +8,7 @@ export async function MailUsingResend({ email, name, OTP }: SendEmailType) {
   console.log(process.env.RESEND_API_KEY);
   try {
     const mailOptions: ResendEmailOptions = {
-      from: "Tedx SJEC <[email protected]>",
+      from: '"Tedx SJEC" <[email protected]>',
       to: email,
       subject: "Tedx SJEC - Your OTP for Email Verification",
       react: EmailTemplate({