diff --git a/content-samples/react/emails/notifications/novu-happybirthday-greeting.tsx b/content-samples/react/emails/notifications/novu-happybirthday-greeting.tsx new file mode 100644 index 0000000..8fd8c7d --- /dev/null +++ b/content-samples/react/emails/notifications/novu-happybirthday-greeting.tsx @@ -0,0 +1,168 @@ +import { + Body, + Button, + Container, + Column, + Head, + Heading, + Html, + Img, + Preview, + Row, + Section, + Text, + } from "@react-email/components"; + import React, { useState } from "react"; + + interface NovuBirthdayNotificationProps { + userFirstName?: string; + } + + const baseUrl = process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}` + : ""; + + export const NovuBirthdayNotification = ({ + userFirstName, + }: NovuBirthdayNotificationProps) => { + + return ( + + + Novu recent login + + +
+ +
+ +
+ + + + + + + + Hi {userFirstName}, + + + We are excited to wish you Happy Birthday!! + + + + We wish you many more novu happy years! + + + + + + + To unwrap your free novu gift + + + +
+ +
+ +
+ + + © 2022 | Novu Inc., 350 Mission Street, San Francisco, CA 94105, + U.S.A. | www.novu.com + + + + + ); + }; + + NovuBirthdayNotification.PreviewProps = { + userFirstName: "Alan", + } as NovuBirthdayNotificationProps; + + export default NovuBirthdayNotification; + + const main = { + backgroundColor: "#fff", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + }; + + const paragraph = { + fontSize: 16, + textAlign: "center", + color: "#a9a5ad", + }; + + const logo = { + padding: "30px 20px", + }; + + const containerButton = { + display: "flex", + justifyContent: "center", + width: "100%", + }; + + const button = { + backgroundColor: "#FF69B4", + borderRadius: 3, + color: "#FFF", + fontWeight: "bold", + border: "1px solid rgb(0,0,0, 0.1)", + cursor: "pointer", + padding: "12px 30px", + }; + + const content = { + border: "1px solid rgb(0,0,0, 0.1)", + borderRadius: "3px", + overflow: "hidden", + }; + + const image = { + maxWidth: "100%", + }; + + const boxInfos = { + padding: "20px", + }; + + const containerImageFooter = { + padding: "45px 0 0 0", + }; + \ No newline at end of file