pocket-id/email-templates/emails/email-verification.tsx

import { Link } from "react-email";
import { BaseTemplate } from "../components/base-template";
import { Button } from "../components/button";
import CardHeader from "../components/card-header";
import { Muted, Paragraph } from "../components/text";
import { colors } from "../components/theme";
import {
  type SharedProps,
  sharedPreviewProps,
  sharedTemplateProps,
} from "../props";

interface EmailVerificationData {
  userFullName: string;
  verificationLink: string;
}

interface EmailVerificationProps extends SharedProps {
  data: EmailVerificationData;
}

export const EmailVerification = ({
  data,
  ...props
}: EmailVerificationProps) => (
  <BaseTemplate
    {...props}
    preview={`Confirm the email address for your ${props.appName} account`}
  >
    <CardHeader title="Verify your email address" />
    <Paragraph>Hello {data.userFullName},</Paragraph>
    <Paragraph>
      Click the button below to confirm the email address for your{" "}
      {props.appName} account. This link expires in 24 hours.
    </Paragraph>

    <Button href={data.verificationLink}>Verify email address</Button>

    <Muted style={{ marginTop: "32px" }}>
      Or if you don't like clicking buttons, open this link:
      <br />
      <Link href={data.verificationLink} style={linkStyle}>
        {data.verificationLink}
      </Link>
    </Muted>
  </BaseTemplate>
);

export default EmailVerification;

const linkStyle = {
  color: colors.mutedForeground,
  textDecoration: "underline",
  wordBreak: "break-all" as const,
};

EmailVerification.TemplateProps = {
  ...sharedTemplateProps,
  data: {
    userFullName: "{{.Data.UserFullName}}",
    verificationLink: "{{.Data.VerificationLink}}",
  },
};

EmailVerification.PreviewProps = {
  ...sharedPreviewProps,
  data: {
    userFullName: "Tim Cook",
    verificationLink:
      "https://id.example.com/user/verify-email?code=abcdefg12345",
  },
};