Built Portfolio Page - 11（email with format）

日常练习
Word count: 235   |   Reading time≈ 1 min

Install email package

1
npm i @react-email/components @react-email/tailwind

Add email format component

add email/contact-form-email.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import React from "react";
import {
  Html,
  Body,
  Head,
  Heading,
  Hr,
  Container,
  Preview,
  Section,
  Text,
} from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";

type ContactFormEmailProps = {
  message: string;
  senderEmail: string;
};

export default function ContactFormEmail({
  message,
  senderEmail,
}: ContactFormEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>New message from your portfolio site</Preview>
      <Tailwind>
        <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>{message}</Text>
              <Hr />
              <Text>The sender`&apos;`s email is: {senderEmail}</Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

Change sendEmail function

1
2
3
4
5
6
7
8
9
...
  resend.emails.send({
    from:"onbording@resend.dev",
    to:"richard119@gmail.com",
    subject:"Message from contact From",
    reply_to: senderEmail as string,
    react: <ContactFormEmail message={message} senderEmail={senderEmail} />
  })
...

Result

请我喝杯咖啡吧~

支付宝
微信