diff --git a/content-samples/react/emails/emailExample/emailExample.tsx b/content-samples/react/emails/emailExample/emailExample.tsx new file mode 100644 index 0000000..a7aebf8 --- /dev/null +++ b/content-samples/react/emails/emailExample/emailExample.tsx @@ -0,0 +1,88 @@ +import { + Body, + Container, + Head, + Html, + Text, + Img, + Link, +} from "@react-email/components"; +import * as React from "react"; + +interface VisualEmailNotificationProps { + validationCode?: string; +} + +export const VisualEmailNotification = ({ + validationCode, +}: VisualEmailNotificationProps) => ( + + + + + Company Logo + Email Notification + + You've received an important notification. + + + Open Email + + + + +); + +export default VisualEmailNotification; + +const main = { + backgroundColor: "#f0f0f0", + fontFamily: "Arial, sans-serif", + padding: "20px", + textAlign: "center" as "center", +}; + +const container = { + backgroundColor: "#ffffff", + borderRadius: "8px", + padding: "20px", + maxWidth: "700px", + height: "auto", + margin: "0 auto", + boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)", +}; + +const logoStyle = { + maxWidth: "100px", + marginBottom: "20px", +}; + +const imageStyle = { + maxWidth: "200px", + marginBottom: "20px", + margin: "auto", +}; + +const messageStyle = { + fontSize: "18px", + color: "#333333", + marginBottom: "20px", +}; + +const buttonStyle = { + display: "inline-block", + background: "linear-gradient(to right, rgb(0, 99, 169), rgb(3, 58, 98))", + color: "#ffffff", + padding: "10px 20px", + borderRadius: "5px", + textDecoration: "none", + fontSize: "16px", +}; 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",