Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 45 46 47 48 | 11x 11x | /** @jsxImportSource react */
import { Button, Link, Section, Text } from "@react-email/components";
import { EmailLayout, styles } from "./components";
type EmailVerificationEmailProps = {
verificationLink: string;
userName?: string;
};
export function EmailVerificationEmail({
verificationLink,
userName,
}: EmailVerificationEmailProps) {
const greeting = userName ? `Hi ${userName},` : "Hi,";
return (
<EmailLayout preview="Verify your Interioring email address">
<Section style={styles.section}>
<Text style={styles.paragraph}>{greeting}</Text>
<Text style={styles.paragraph}>
Welcome to Interioring! Please verify your email address to complete
your registration and get started.
</Text>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={verificationLink} style={styles.button}>
Verify Email Address
</Button>
</Section>
<Text style={styles.mutedText}>
This link will expire in 24 hours. If you didn't create an account
with Interioring, you can safely ignore this email.
</Text>
<Text style={styles.mutedText}>
If the button doesn't work, copy and paste this link into your
browser:
</Text>
<Text style={{ ...styles.mutedText, wordBreak: "break-all" }}>
<Link href={verificationLink} style={styles.link}>
{verificationLink}
</Link>
</Text>
</Section>
</EmailLayout>
);
}
export default EmailVerificationEmail;
|