diff --git a/content-samples/react/emails/notifications/novu-inventory-restock.tsx b/content-samples/react/emails/notifications/novu-inventory-restock.tsx new file mode 100644 index 0000000..8ce3992 --- /dev/null +++ b/content-samples/react/emails/notifications/novu-inventory-restock.tsx @@ -0,0 +1,152 @@ + import { + Body, + Button, + Container, + Head, + Html, + Img, + Link, + Preview, + Section, + Text, + } from "@react-email/components"; + import * as React from "react"; + + interface InventoryRestockAlertProps { + username?: string; + productName?: string; + productLink?: string; + productImage?: string; + } + + export const InventoryRestockAlertEmail = ({ + username, + productName, + productLink, + productImage, + }: InventoryRestockAlertProps) => ( + + + Your favorite item is back in stock! + + + Novu Logo + + + @{username}, the {productName} is + back in stock! + + +
+ + Hey {username}! + + + Good news! The product you've been waiting for,{" "} + {productName}, is now back in stock. Act fast to + get it before it's gone again! + + {`Image + +
+ + + Browse more products ・{" "} + Contact support + + + + Business Inc. ・123 Business St ・City, Country 12345 + + + + + ); + + InventoryRestockAlertEmail.PreviewProps = { + username: "customer123", + productName: "Wireless Headphones", + productLink: "https://www.google.com", + productImage: "https://m.media-amazon.com/images/I/41+1Csr1pSL._AC_SX679_.jpg", + } as InventoryRestockAlertProps; + + export default InventoryRestockAlertEmail; + + const main = { + backgroundColor: "#f9f9f9", + 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: "40px 20px 48px", + }; + + const title = { + fontSize: "28px", + lineHeight: 1.4, + textAlign: "center", + color: "#333", + margin: "20px 0", + }; + + + const section = { + padding: "30px", + border: "solid 1px #e5e5e5", + borderRadius: "8px", + textAlign: "center", + backgroundColor: "#fdfdfd", + boxShadow: "0 6px 15px rgba(0, 0, 0, 0.05)", + }; + + const text = { + margin: "0 0 10px 0", + textAlign: "left" as const, + }; + + const button = { + fontSize: "16px", + backgroundColor: "#ff7f50", + color: "#fff", + padding: "14px 28px", + borderRadius: "5px", + textDecoration: "none", + display: "inline-block", + transition: "background-color 0.3s ease", + }; + + const links = { + textAlign: "center" as const, + }; + + const link = { + color: "#0366d6", + fontSize: "12px", + textDecoration: "underline", + }; + + const footer = { + color: "#6a737d", + fontSize: "12px", + textAlign: "center", + marginTop: "40px", + borderTop: "1px solid #dedede", + paddingTop: "20px", + }; 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",