diff --git a/content-samples/react/emails/notifications/novu-new-post.tsx b/content-samples/react/emails/notifications/novu-new-post.tsx new file mode 100644 index 0000000..2142a3b --- /dev/null +++ b/content-samples/react/emails/notifications/novu-new-post.tsx @@ -0,0 +1,158 @@ +import { + Body, + Button, + Container, + Head, + Html, + Img, + Link, + Preview, + Section, + Text, + } from "@react-email/components"; + import * as React from "react"; + + interface NovuNewPostEmailProps { + username?: string; + usernamePost?: string; + post?: string; + } + + const baseUrl = process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}` + : ""; + + export const NovuNewPostEmail = ({ + username,usernamePost,post + }: NovuNewPostEmailProps) => ( + + + + A fine-grained personal access token has been added to your account + + + + + + LinkedIn Logo + +
+ Profile Picture +
+ +
+ + {usernamePost} uploaded a new post. + + +
+ + Hey {username}! + + + {post} + + + Posted by {usernamePost} + + +
+
+ + + Your security audit log ・{" "} + Contact support + + + + Novu, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107 + + + + + + ); + + NovuNewPostEmail.PreviewProps = { + username: "alanturing", + usernamePost: "Rose", + post: ` + 🌟 Excited for New Opportunities! 🌟 + + After completing my programming studies and gaining hands-on experience in full-stack development (C#, Angular, React, Node.js, SQL, MongoDB), I'm ready to take on my next challenge! + + I'm passionate about building innovative solutions, working collaboratively, and continuously growing in the tech field. + + πŸ“’ If your team is looking for a dedicated, creative, and driven developer, let's connect! + + `, + } as NovuNewPostEmailProps; + + + export default NovuNewPostEmail; + + const main = { + backgroundColor: "#ffffff", + color: "#24292e", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"', + }; + + const container = { + maxWidth: "480px", + margin: "0 auto", + padding: "20px 0 48px", + }; + + const title = { + fontSize: "24px", + lineHeight: 1.25, + }; + + const section = { + padding: "24px", + border: "solid 1px #dedede", + borderRadius: "5px", + textAlign: "center" as const, + }; + + const text = { + margin: "0 0 10px 0", + textAlign: "left" as const, + }; + + const button = { + fontSize: "14px", + backgroundColor: "#28a745", + color: "#fff", + lineHeight: 1.5, + borderRadius: "0.5em", + padding: "12px 24px", + }; + + const links = { + textAlign: "center" as const, + }; + + const link = { + color: "#0366d6", + fontSize: "12px", + }; + + const footer = { + color: "#6a737d", + fontSize: "12px", + textAlign: "center" as const, + marginTop: "60px", + }; \ No newline at end of file diff --git a/content-samples/react/package-lock.json b/content-samples/react/package-lock.json index e205b7d..8e9b0bb 100644 --- a/content-samples/react/package-lock.json +++ b/content-samples/react/package-lock.json @@ -1,11 +1,11 @@ { - "name": "emails", + "name": "react-email-templates", "version": "0.0.19", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "emails", + "name": "react-email-templates", "version": "0.0.19", "dependencies": { "@react-email/components": "0.0.18",