Verification Code Email

VerificationMail.jsx

import React from 'react';

import { Email, Container, Row, Column, Header, FullWidth, Footer, Text, Link, PostonentsProvider } from 'postonents';

// Data here represents the Example Data we might get passed to from the backend.
// This can be anything and you need, you have to define it beforehand
const VerificationEmail = ({ lang, data }) => {
  const { verifyToken, email } = data;
  return (
    <PostonentsProvider theme={{ typo: { fontFamily: 'Roboto, sans-serif' } }}>
      <Email
        lang={lang}
        title={`Verification email for ${email}`}
        headStyles="body { background-color: white; padding: 40px 0; }"
        headLinks={[
          {
            type: 'link',
            props: {
              rel: 'stylesheet',
              href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,700',
            },
          },
        ]}>
        <Header logo="https://assets.airbnb.com/press/logos/NBC%20Logo.gif" logoHeight={50} style={{ marginBottom: 24 }} />
        <Container alignment="center">
          <Row>
            <Column>
              <Text fontSize={20} fontWeight={300}>
                Hello,
              </Text>
            </Column>
            <Column style={{ marginBottom: 24 }}>
              <Text fontSize={20} fontWeight={300}>
                You just registered with the following email: {email}. To verify this email please click on the link or the text link below.
              </Text>
            </Column>
            <Column style={{ marginBottom: 24, textAlign: 'center' }}>
              <Link href={`https://example.com/verify/${verifyToken}`} type="primary">
                Verify your email
              </Link>
            </Column>
            <Column style={{ marginBottom: 24, textAlign: 'center' }}>
              <Link href={`https://example.com/verify/${verifyToken}`}>{`https://example.com/verify/${verifyToken}`}</Link>
            </Column>
          </Row>
        </Container>
        <FullWidth style={{ marginBottom: 24 }}>
          <Container alignment="center">
            <Row>
              <Column>
                <Text>Any other questions? We are happy to help!</Text>
              </Column>
              <Column small={6}>
                <Link href="https://support.example.com" fullWidth type="hollow">
                  Help Center
                </Link>
              </Column>
              <Column small={6}>
                <Link href="mailto:info@example.com" fullWidth type="hollow">
                  Email
                </Link>
              </Column>
            </Row>
          </Container>
        </FullWidth>
        <Footer style={{ color: 'white' }}>
          <Container alignment="center">
            <Row>
              <Column style={{ textAlign: 'center', fontSize: 12, lineHeight: '16px', fontWeight: 300 }}>
                Copyright © 2018 NBC, all rights reserved
                <br />
                registered in the commercial register Narnia
              </Column>
            </Row>
          </Container>
        </Footer>
      </Email>
    </PostonentsProvider>
  );
};

export default VerificationEmail;