had to change to canary version of react-email projects because of a …

…defect resend/react-email#1391
everybodyloveshaggis · Apr 11, 2024 · 9cd8892 · 9cd8892
1 parent 56935a5
commit 9cd8892
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 26 deletions.
diff --git a/api/sendEmail.ts b/api/sendEmail.ts
@@ -28,7 +28,6 @@ export const sendEmail = async (formData: FormData) => {
             // text: senderMessage as string,
             react: React.createElement(ContactFormEmail,
                 {
-                    //assertion needed here as we know for sure this will be correct, due to validation we are preforming on frontend and API
                     senderMessage: senderMessage as string,
                     senderEmail: senderEmail as string
                 }

diff --git a/email/contact-form-email.tsx b/email/contact-form-email.tsx
@@ -19,27 +19,27 @@ type ContactFormEmailProps = {
 };
 
 export default function ContactFormEmail({ senderMessage, senderEmail }: ContactFormEmailProps) {
-    console.log(<Heading as='h2'>
-                            You received the following message from the contact form
-                        </Heading>);
-    console.log(<Text>{senderMessage}</Text>);
-    return (<Html lang='en'>
+    var responsehtml =(
+        <Html>
         <Head />
-        <Preview>New Message From Your Portfolio</Preview>
+        <Preview>New message from your portfolio site</Preview>
         <Tailwind>
-            <Body>
-                <Container>
-                    <Section>
-                        <Heading as='h2'>
-                            You received the following message from the contact form
-                        </Heading>
-                        <Text>{senderMessage}</Text>
-                        <Hr />
-                        <Text>The sender's email is {senderEmail}</Text>
-                    </Section>
-                </Container>
-            </Body>
+          <Body className="bg-gray-100 text-black">
+            <Container>
+              <Section className="bg-white borderBlack my-10 px-10 py-4 rounded-md">
+                <Heading className="leading-tight">
+                  You received the following message from the contact form
+                </Heading>
+                <Text>{senderMessage}</Text>
+                <Hr />
+                <Text>The sender's email is: {senderEmail}</Text>
+              </Section>
+            </Container>
+          </Body>
         </Tailwind>
-    </Html>
-    )
+      </Html>
+    );
+
+    console.log(responsehtml);
+    return responsehtml;
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@react-email/components": "^0.0.16",
-    "@react-email/tailwind": "^0.0.15",
+    "@react-email/tailwind": "^0.0.16-canary.1",
     "clsx": "^2.1.0",
     "framer-motion": "^10.16.5",
     "next": "14.0.3",