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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | 20x | /** @jsxImportSource react */
import { Button, Section, Text, Link } from "@react-email/components";
import { EmailLayout, styles } from "./components";
export type BlogPublishedEmailProps = {
proName: string;
blogTitle: string;
blogUrl: string;
shareUrls?: {
facebook?: string;
twitter?: string;
linkedin?: string;
whatsapp?: string;
};
};
export function BlogPublishedEmail({
proName,
blogTitle,
blogUrl,
shareUrls,
}: BlogPublishedEmailProps) {
return (
<EmailLayout preview={`Your blog is live: ${blogTitle}`}>
<Section style={styles.section}>
<Text style={styles.paragraph}>Hi {proName},</Text>
<Text style={styles.paragraph}>
Congratulations! 🎉 The blog post featuring your work is now live on
Interioring.
</Text>
<Section
style={{
backgroundColor: "#DCFCE7",
borderRadius: "8px",
padding: "20px",
margin: "24px 0",
borderLeft: "4px solid #10B981",
}}
>
<Text style={{ ...styles.paragraph, margin: "0 0 12px 0" }}>
<strong>✨ Published:</strong>
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Blog Title:</strong> {blogTitle}
</Text>
<Text style={{ ...styles.paragraph, margin: "12px 0 0 0" }}>
<Link href={blogUrl} style={styles.link}>
{blogUrl}
</Link>
</Text>
</Section>
<Text style={styles.paragraph}>
This is a great opportunity to showcase your work to thousands of
clients looking for interior design inspiration!
</Text>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={blogUrl} style={styles.button}>
View Published Blog
</Button>
</Section>
{shareUrls && (
<>
<Text style={{ ...styles.paragraph, textAlign: "center" }}>
<strong>Share on social media:</strong>
</Text>
<Section style={{ textAlign: "center", margin: "16px 0" }}>
{shareUrls.facebook && (
<Link
href={shareUrls.facebook}
style={{
...styles.link,
margin: "0 8px",
textDecoration: "none",
}}
>
Facebook
</Link>
)}
{shareUrls.twitter && (
<Link
href={shareUrls.twitter}
style={{
...styles.link,
margin: "0 8px",
textDecoration: "none",
}}
>
Twitter
</Link>
)}
{shareUrls.linkedin && (
<Link
href={shareUrls.linkedin}
style={{
...styles.link,
margin: "0 8px",
textDecoration: "none",
}}
>
LinkedIn
</Link>
)}
{shareUrls.whatsapp && (
<Link
href={shareUrls.whatsapp}
style={{
...styles.link,
margin: "0 8px",
textDecoration: "none",
}}
>
WhatsApp
</Link>
)}
</Section>
</>
)}
<Text style={styles.mutedText}>
The more you share, the more visibility you get! We encourage you to
share this on your social media channels and with your clients.
</Text>
<Text style={styles.paragraph}>
Thank you for being part of the Interioring community!
</Text>
<Text style={styles.paragraph}>
Best regards,
<br />
The Interioring Team
</Text>
</Section>
</EmailLayout>
);
}
export default BlogPublishedEmail;
|