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 80 81 82 83 84 85 86 87 88 89 | 17x 17x 17x | /** @jsxImportSource react */
import { Button, Section, Text } from "@react-email/components";
import { EmailLayout, styles } from "./components";
export type BlogApprovalRequestEmailProps = {
proName: string;
blogTitle: string;
attributionType: string;
approvalLink: string;
expiryDays?: number;
};
export function BlogApprovalRequestEmail({
proName,
blogTitle,
attributionType,
approvalLink,
expiryDays = 7,
}: BlogApprovalRequestEmailProps) {
const attributionTextMap: Record<string, string> = {
project_feature: "featuring your project",
expert_quote: "including your expert quote",
roundup: "including your work in a roundup",
idea_contributor: "based on your suggestion",
};
const attributionText = attributionTextMap[attributionType] || "featuring your work";
return (
<EmailLayout preview={`Review Required: ${blogTitle}`}>
<Section style={styles.section}>
<Text style={styles.paragraph}>Hi {proName},</Text>
<Text style={styles.paragraph}>
Great news! We've written a blog post {attributionText} and would love
to feature you.
</Text>
<Section
style={{
backgroundColor: "#F3F4F6",
borderRadius: "8px",
padding: "20px",
margin: "24px 0",
}}
>
<Text style={{ ...styles.paragraph, margin: "0 0 12px 0" }}>
<strong>Blog Details:</strong>
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Title:</strong> {blogTitle}
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Attribution Type:</strong>{" "}
{attributionType.replace(/_/g, " ")}
</Text>
</Section>
<Text style={styles.paragraph}>
We need your approval before we publish this post. Please review the
content and let us know if you'd like any changes.
</Text>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={approvalLink} style={styles.button}>
Review & Approve Blog
</Button>
</Section>
<Text style={styles.mutedText}>
Please respond within {expiryDays} days. If we don't hear from you,
we'll assume you're happy with the content and proceed with
publication.
</Text>
<Text style={styles.paragraph}>
This is a great opportunity to get more visibility for your work!
</Text>
<Text style={styles.paragraph}>
Best regards,
<br />
The Interioring Team
</Text>
</Section>
</EmailLayout>
);
}
export default BlogApprovalRequestEmail;
|