diff --git a/content-samples/react/emails/notifications/novu-invite-meeting.tsx b/content-samples/react/emails/notifications/novu-invite-meeting.tsx new file mode 100644 index 0000000..81a669f --- /dev/null +++ b/content-samples/react/emails/notifications/novu-invite-meeting.tsx @@ -0,0 +1,235 @@ +import { + Body, + Button, + Column, + Container, + Head, + Heading, + Html, + Img, + Preview, + Row, + Section, + Text, +} from "@react-email/components"; +import * as React from "react"; + +interface MeetingInviteEmailProps { + meetingTitle?: string; + meetingDate?: Date; + organizerName?: string; + participants?: string[]; + location?: string; + subject?: string; +} +export const MeetingInviteEmail = ({ + meetingTitle, + meetingDate, + organizerName, + participants = [], + location, + subject, +}: MeetingInviteEmailProps) => { + const formattedDate = new Intl.DateTimeFormat("en", { + dateStyle: "full", + timeStyle: "short", + }).format(meetingDate); + return ( + + + {meetingTitle || "Meeting Invitation"} + + + +
+ NOVU Logo +
+ + +
+ + Meeting Image + + + + + + + Meeting Date + {formattedDate} + + + + + + + + {meetingTitle} + + + Date and Time: {formattedDate} + + + Organizer: {organizerName} + + + Subject: {subject} + + + Location: {location} + + {participants.length > 0 && ( + + Participants: {participants.join(", ")} + + )} + + + + {/* Response Buttons */} + + + + + + + + + +
+ +
+ Footer Image +
+ + + © 2024 | Novu Inc., 350 Mission Street, San Francisco, CA 94105, + U.S.A. | www.novu.com + + + + + ); +}; + +MeetingInviteEmail.PreviewProps = { + meetingTitle: "Meeting Invitation with NOVU Team", + meetingDate: new Date("August 1, 2024, 2:30 PM"), + organizerName: "Tamar Henfling", + participants: ["Yael Dovrat", "John Doe", "Jane Smith"], + location: "Zoom - https://zoom.us/j/123456789", + subject: "Project Kickoff Meeting", +} as MeetingInviteEmailProps; + +export default MeetingInviteEmail; + + +const main = { + backgroundColor: "#fff", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', +}; + +const paragraph = { + fontSize: 16, +}; + +const logo = { + padding: "30px 20px", +}; + +const containerButton = { + display: "flex", + justifyContent: "center", + width: "100%", + gap: "10px", +}; + +const button = { + borderRadius: 3, + color: "#FFF", + fontWeight: "bold", + border: "1px solid rgb(0,0,0, 0.1)", + cursor: "pointer", + padding: "12px 30px", + textAlign: "center", +}; + +const buttonYes = { + ...button, + backgroundImage: "linear-gradient(90deg, #e91e63, #f44336)", +}; + +const buttonMaybe = { + ...button, + backgroundImage: "linear-gradient(90deg, #fcb045, #fd1d1d)", +}; + +const buttonNo = { + ...button, + backgroundImage: "linear-gradient(90deg, #f44336, #e91e63)", +}; + +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", +}; + +const rowContainer = { + display: "flex", + justifyContent: "space-between", + alignItems: "flex-start", +}; + +const dateCard = { + backgroundColor: "#f9f9f9", + borderRadius: "8px", + padding: "20px", + margin: "20px 0", + boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", + width: "25%", +}; + +const mainContentColumn = { + paddingLeft: "20px", + width: "70%", +}; \ No newline at end of file