1import {
2  Body,
3  Button,
4  Column,
5  Container,
6  Head,
7  Heading,
8  Hr,
9  Html,
10  Img,
11  Link,
12  Preview,
13  Row,
14  Section,
15  Text,
16  Tailwind,
17} from 'react-email';
18import * as React from 'react';
19
20const WelcomeEmail = ({
21  username = 'Steve',
22  company = 'ACME',
23}: WelcomeEmailProps) => {
24  const previewText = `Welcome to ${company}, ${username}!`;
25
26  return (
27    <Html>
28      <Head />
29      <Preview>{previewText}</Preview>
30      <Tailwind>
31        <Body className="bg-white my-auto mx-auto font-sans">
32          <Container className="my-10 mx-auto p-5 w-[465px]">
33            <Section className="mt-8">
34              <Img
35                src={`${baseUrl}/static/example-logo.png`}
36                width="80"
37                height="80"
38                alt="Logo Example"
39                className="my-0 mx-auto"
40              />
41            </Section>
42            <Heading className="text-2xl font-normal text-center p-0 my-8 mx-0">
43              Welcome to <strong>{company}</strong>,{' '}
44              {username}!
45            </Heading>
46            <Text className="text-sm">
47              Hello {username},
48            </Text>
49            <Text className="text-sm">
50              We're excited to have you onboard at{' '}
51              <strong>{company}</strong>. We hope you enjoy
52              your journey with us. If you have any
53              questions or need assistance, feel free to
54              reach out.
55            </Text>
56            <Section className="text-center mt-[32px] mb-[32px]">
57              <Button
58                pX={20}
59                pY={12}
60                className="bg-[#00A3FF] rounded-sm text-white text-xs font-semibold no-underline text-center"
61                href={`${baseUrl}/get-started`}
62              >
63                Get Started
64              </Button>
65            </Section>
66            <Text className="text-sm">
67              Cheers,
68              <br />
69              The {company} Team
70            </Text>
71          </Container>
72        </Body>
73      </Tailwind>
74    </Html>
75  );
76};
77
78interface WelcomeEmailProps {
79  username?: string;
80  company?: string;
81}
82
83const baseUrl = process.env.URL
84  ? `https://${process.env.URL}`
85  : '';
86
87export default WelcomeEmail;