diff --git a/content-samples/react/emails/notifications/novu-user-details.tsx b/content-samples/react/emails/notifications/novu-user-details.tsx new file mode 100644 index 0000000..5bbc1bc --- /dev/null +++ b/content-samples/react/emails/notifications/novu-user-details.tsx @@ -0,0 +1,196 @@ +import { + Body, + Button, + Container, + Column, + Head, + Heading, + Hr, + Html, + Img, + Row, + Section, + Text, + Tailwind, +} from "@react-email/components"; +import * as React from "react"; + +interface NovuUserDetailsProps { + username?: string; + userFullName?: string; + userEmail?: string; + userPhone?: string; + userPersonalWeb?: string; + userProfilLink?: string; +} + +const baseUrl = process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}` + : ""; + +export const NovuUserDetails = ({ + username, + userFullName, + userEmail, + userPhone, + userPersonalWeb, + userProfilLink, +}: NovuUserDetailsProps) => ( + + + + + +
+ Novu +
+ + Hi @{username}! + +
+ + Here are the details you registered under: + + + {userFullName} + +
+ + + + mail + + + {userEmail} + + + + + + call + + + {userPhone} + + + + + + public + + + {userPersonalWeb} + + +
+
+
+ +
+
+
+ +
+ + © 2024 | Donated by Sara Vagshal | https://novu.co/ + + + + + + ); + +NovuUserDetails.PreviewProps = { + username: "sara-username", + userFullName: "Sara Vagshal", + userEmail: "name.family@example.com", + userPhone: "+972-123456789", + userPersonalWeb: "https://example-example/", + userProfilLink: "https://novu.co/" +} as NovuUserDetailsProps; + +export default NovuUserDetails; + +const container = { + border: "1px solid #eaeaea", + borderRadius: "40px", + margin: "0 auto", + padding: "20px", + maxWidth: "465px", +}; + +const logo = { + margin: "0 auto", + borderRadius: 21, + width: 54, + height: 54, +}; + +const header = { + fontSize: "24px", + textAlign: "center" as const, + padding: "5px", +}; + +const fullName = { + color: "#FF6363", + fontSize: "24px", + fontWeight: "bold", + textAlign: "center" as const, + padding: "6px", +}; + +const icon = { + padding: "6px 0 0 30px", +}; +const userDetail = { + fontSize: "18px", + textAlign: "left" as const, + display: "flex", + alignItems: "left" as const, + justifyContent: "left", +}; + +const textBottom = { + color: "rgb(0,0,0, 0.7)", + fontSize: "12px", + textAlign: "center" as const, +}; + +const containerButton = { + display: "flex", + justifyContent: "center", + width: "100%", + padding: "18px 5px", +}; + +const button = { + backgroundColor: "#FF6363", + borderRadius: "4px", + color: "#fff", + fontSize: "16px", + textAlign: "center" as const, + display: "block", + width: "210px", + padding: "10px 5px", +}; + +const hr = { + borderColor: "#eaeaea", + margin: "42px 0 26px", +}; + +const imgButtom = { + maxWidth: "100%", + width: 620, + padding: "20px", +}; +