diff --git a/content-samples/react/emails/notifications/novu-report-notification.tsx b/content-samples/react/emails/notifications/novu-report-notification.tsx new file mode 100644 index 0000000..016999d --- /dev/null +++ b/content-samples/react/emails/notifications/novu-report-notification.tsx @@ -0,0 +1,187 @@ +import { + Body, + Container, + Column, + Head, + Heading, + Html, + Img, + Link, + Preview, + Row, + Section, + Text, +} from "@react-email/components"; +import * as React from "react"; + +interface NovuReportNotificationEmailProps { + recipientName: string; + reportTitle: string; + reportDateRange: string; + highlights: string; + dashboardLink: string; + helpCenterLink: string; + twitterLink: string; + facebookLink: string; + linkedinLink: string; + logoSrc: string; +} + +const baseUrl = process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}` + : ""; + +export const NovuReportNotificationEmail = ({ + recipientName, + reportTitle, + reportDateRange, + highlights, + dashboardLink, + helpCenterLink, + twitterLink, + facebookLink, + linkedinLink, + logoSrc +}: NovuReportNotificationEmailProps) => ( + + + Your Personal Report Is Ready! + + +
+ Company Logo +
+
+ + + + + +
+
+ Dear {recipientName}, + + We’re excited to let you know that your personalized report is now available in your private dashboard. 🎉 + + + Report Summary: + + + Title: {reportTitle} + + + Date Range: {reportDateRange} + + + Highlights: {highlights} + + + To access your report, simply click the button below: + + + Access My Dashboard + + + If you have any questions or need further assistance, feel free to reply to this email or visit our{' '} + + Help Center + . + + + Best regards, +
+ The Example Team + +
+ + +
+ + + + + + + + + + + + + + + © 2024 Example Technologies, Inc. All Rights Reserved
+ 500 Howard Street, San Francisco, CA, 94105 - USA + + +
+ + + +); + +NovuReportNotificationEmail.PreviewProps = { + recipientName: "BatSheva", + reportTitle: "Monthly Performance Metrics", + reportDateRange: "August 2024", + highlights: "Increased user engagement, improved conversion rates, and overall growth.", + dashboardLink: "https://example.com/dashboard", + helpCenterLink: "https://example.com/help-center", + twitterLink: "https://twitter.com/example", + facebookLink: "https://facebook.com/example", + linkedinLink: "https://linkedin.com/company/example", + logoSrc: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/dca73b36-cf39-4e28-9bc7-8a0d0cd8ac70/standalone-gradient2x_2/w=128,quality=90,fit=scale-down" // Path or URL to the company logo +} as NovuReportNotificationEmailProps; + + +const styles = { + main: { + fontFamily: '"Helvetica Neue", Arial, sans-serif', + backgroundColor: '#ffffff', + color: '#333', + }, + container: { + maxWidth: '600px', + margin: '0 auto', + padding: '20px', + border: '1px solid #e0e0e0', + borderRadius: '10px', + backgroundColor: '#ffffff', + }, + logo: { + textAlign: 'center' as const, + marginBottom: '20px', + }, + sectionsBorders: { + width: '100%', + borderBottom: '1px solid #e0e0e0', + marginBottom: '20px', + }, + sectionBorder: { + width: '100%', + borderRight: '1px solid #e0e0e0', + }, + sectionCenter: { + width: '100%', + }, + content: { + marginBottom: '20px', + }, + paragraph: { + fontSize: '16px', + lineHeight: '1.5', + marginBottom: '10px', + }, + link: { + color: '#007BFF', + textDecoration: 'none', + }, + footer: { + textAlign: 'center' as const, + fontSize: '12px', + color: '#888', + marginTop: '20px', + } +}; + +export default NovuReportNotificationEmail;