pocket-id/email-templates/emails/one-time-access.tsx

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

interface OneTimeAccessData {
	code: string;
	loginLink: string;
	buttonCodeLink: string;
	expirationString: string;
}

interface OneTimeAccessEmailProps extends SharedProps {
	data: OneTimeAccessData;
}

export const OneTimeAccessEmail = ({ data, ...props }: OneTimeAccessEmailProps) => (
	<BaseTemplate {...props} preview={`Your ${props.appName} login code is ${data.code}`}>
		<CardHeader title="Your login code" />
		<Paragraph>
			Use the code below to sign in to {props.appName}. It expires in {data.expirationString}.
		</Paragraph>

		<CodeBox code={data.code} />

		<Button href={data.buttonCodeLink}>Sign in</Button>

		<Muted style={{ marginTop: '32px' }}>
			Or open{' '}
			<Link href={data.loginLink} style={linkStyle}>
				{data.loginLink}
			</Link>{' '}
			and enter the code manually.
		</Muted>
	</BaseTemplate>
);

export default OneTimeAccessEmail;

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

OneTimeAccessEmail.TemplateProps = {
	...sharedTemplateProps,
	data: {
		code: '{{.Data.Code}}',
		loginLink: '{{.Data.LoginLink}}',
		buttonCodeLink: '{{.Data.LoginLinkWithCode}}',
		expirationString: '{{.Data.ExpirationString}}'
	}
};

OneTimeAccessEmail.PreviewProps = {
	...sharedPreviewProps,
	data: {
		code: '123456',
		loginLink: 'https://id.example.com/lc',
		buttonCodeLink: 'https://id.example.com/lc/123456',
		expirationString: '15 minutes'
	}
};