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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 14x | /** @jsxImportSource react */
import { Button, Section, Text } from "@react-email/components";
import { EmailLayout, styles } from "./components";
export type BlogApprovalReminderEmailProps = {
proName: string;
blogTitle: string;
approvalLink: string;
daysRemaining: number;
};
export function BlogApprovalReminderEmail({
proName,
blogTitle,
approvalLink,
daysRemaining,
}: BlogApprovalReminderEmailProps) {
return (
<EmailLayout preview={`Reminder: Blog approval needed - ${blogTitle}`}>
<Section style={styles.section}>
<Text style={styles.paragraph}>Hi {proName},</Text>
<Text style={styles.paragraph}>
This is a friendly reminder that we're waiting for your approval on a
blog post featuring your work.
</Text>
<Section
style={{
backgroundColor: "#FEF3C7",
borderRadius: "8px",
padding: "20px",
margin: "24px 0",
borderLeft: "4px solid #F59E0B",
}}
>
<Text style={{ ...styles.paragraph, margin: "0 0 12px 0" }}>
<strong>⏰ Action Required:</strong>
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Blog Title:</strong> {blogTitle}
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Time Remaining:</strong>{" "}
{daysRemaining === 1
? "1 day"
: `${daysRemaining} days`}{" "}
to review
</Text>
</Section>
<Text style={styles.paragraph}>
{daysRemaining === 1
? "This is your last day to review the content. If we don't hear from you by tomorrow, we'll proceed with publication."
: `You have ${daysRemaining} days remaining to review the content. If we don't hear from you, we'll assume you're happy with it and proceed with publication.`}
</Text>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={approvalLink} style={styles.button}>
Review Blog Now
</Button>
</Section>
<Text style={styles.mutedText}>
Don't miss this opportunity to ensure your work is represented exactly
how you want it!
</Text>
<Text style={styles.paragraph}>
Best regards,
<br />
The Interioring Team
</Text>
</Section>
</EmailLayout>
);
}
export default BlogApprovalReminderEmail;
|