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 | 12x 12x | /** @jsxImportSource react */
import { Button, Link, Section, Text } from "@react-email/components";
import { EmailLayout, styles } from "./components";
type PasswordResetEmailProps = {
resetLink: string;
userName?: string;
};
export function PasswordResetEmail({
resetLink,
userName,
}: PasswordResetEmailProps) {
const greeting = userName ? `Hi ${userName},` : "Hi,";
return (
<EmailLayout preview="Reset your Interioring password">
<Section style={styles.section}>
<Text style={styles.paragraph}>{greeting}</Text>
<Text style={styles.paragraph}>
We received a request to reset your password for your Interioring
account. Click the button below to set a new password:
</Text>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={resetLink} style={styles.button}>
Reset Password
</Button>
</Section>
<Text style={styles.mutedText}>
This link will expire in 1 hour. If you didn't request a password
reset, 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={resetLink} style={styles.link}>
{resetLink}
</Link>
</Text>
</Section>
</EmailLayout>
);
}
export default PasswordResetEmail;
|