From c4d1f8393627b1b0df5348553dbd17b3acdb4099 Mon Sep 17 00:00:00 2001 From: NS Date: Thu, 12 Sep 2024 18:27:48 +0300 Subject: [PATCH 1/5] Add examples for weekly sales and order status emails --- .../react/emails/newsletters/weekly-sales.tsx | 173 ++++++++++++++++++ .../emails/order-status/order-status-1.tsx | 156 ++++++++++++++++ 2 files changed, 329 insertions(+) create mode 100644 content-samples/react/emails/newsletters/weekly-sales.tsx create mode 100644 content-samples/react/emails/order-status/order-status-1.tsx diff --git a/content-samples/react/emails/newsletters/weekly-sales.tsx b/content-samples/react/emails/newsletters/weekly-sales.tsx new file mode 100644 index 0000000..6fe2136 --- /dev/null +++ b/content-samples/react/emails/newsletters/weekly-sales.tsx @@ -0,0 +1,173 @@ +import { + Body, + Container, + Head, + Heading, + Html, + Img, + Preview, + Section, + Text, + Link, +} from "@react-email/components"; +import * as React from "react"; + +interface WeeklySalesEmailProps { + items?: { imgSrc: string; price: string }[]; + storeLink: string; +} + +export const WeeklySalesEmail = ({ items = [], storeLink }: WeeklySalesEmailProps) => ( + + + Weekly Specials Just for You! + + + Weekly Specials Just for You! + +
+
+ {items.slice(0, 6).map((item, index) => ( // Display exactly 6 items +
+ {`Sale + Price: ${item.price} +
+ ))} +
+
+ +
+ + Grab These Deals Today! + + + Hurry, These Deals Won't Last! + + + + Browse our full selection ・{" "} + CNeed help? Contact us! + + + + Business Inc. ・123 Business St ・City, Country 12345 + +
+ + + +); + +WeeklySalesEmail.PreviewProps = { + items: [ + { imgSrc: "https://images.pexels.com/photos/128598/pexels-photo-128598.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: "20.56" }, + { imgSrc: "https://images.pexels.com/photos/2363347/pexels-photo-2363347.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: "30.90" }, + { imgSrc: "https://images.pexels.com/photos/70746/strawberries-red-fruit-royalty-free-70746.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: "7.50" }, + { imgSrc: "https://images.pexels.com/photos/760281/pexels-photo-760281.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: "12.90" }, + { imgSrc: "https://images.pexels.com/photos/51958/oranges-fruit-vitamins-healthy-eating-51958.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: "10.36" }, + { imgSrc: "https://images.pexels.com/photos/693794/pexels-photo-693794.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: "15.20" }, + ], + storeLink: "https://store.com", +} as WeeklySalesEmailProps; + +const main = { + backgroundColor: "#ffffff", + fontFamily: + '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif', +}; + +const container = { + margin: "0 auto", + padding: "20px", + maxWidth: "600px", +}; + +const heading = { + fontSize: "36px", + lineHeight: "1.4", + fontWeight: "700", + color: "#ff0000", + textAlign: "center" as const, + marginBottom: "20px", +}; + +const h2 = { + fontSize: "28px", + lineHeight: "1.4", + fontWeight: "700", + color: "#ff0000", + textAlign: "center" as const, + marginBottom: "20px", +}; + +const gridStyle = { + display: "grid", + gridTemplateColumns: "repeat(3, 1fr)", + gap: "10px", + justifyItems: "center" as const, + background: "rgb(245, 244, 245)", + borderRadius: "4px", + marginBottom: "30px", + padding: "40px 10px", +}; + +const itemContainer = { + width: "100%", + textAlign: "center" as const, +}; + +const imageStyle = { + width: "100%", + maxWidth: "180px", + height: "180px", + objectFit: "cover" as const, + borderRadius: "5px", +}; + +const priceStyle = { + marginTop: "10px", + fontWeight: "bold", + fontSize: "16px", + color: "#333333", +}; + +const buttonContainer = { + textAlign: "center" as const, + marginTop: "20px", +}; + +const storeButtonStyle = { + display: "inline-block", + padding: "15px 30px", + backgroundColor: "#ff0000", + color: "#ffffff", + textDecoration: "none", + fontWeight: "bold", + borderRadius: "5px", + fontSize: "16px", +}; + +const links = { + textAlign: "center" as const, +}; + +const link = { + color: "#0366d6", + fontSize: "12px", + textDecoration: "underline", +}; + +const footer = { + color: "#6a737d", + fontSize: "12px", + textAlign: "center" as const, + marginTop: "40px", + borderTop: "1px solid #dedede", + paddingTop: "20px", +}; + +export default WeeklySalesEmail; diff --git a/content-samples/react/emails/order-status/order-status-1.tsx b/content-samples/react/emails/order-status/order-status-1.tsx new file mode 100644 index 0000000..83ee4cb --- /dev/null +++ b/content-samples/react/emails/order-status/order-status-1.tsx @@ -0,0 +1,156 @@ +import { + Body, + Button, + Container, + Column, + Head, + Heading, + Html, + Img, + Link, + Preview, + Row, + Section, + Text, +} from "@react-email/components"; +import * as React from "react"; + + +/* +1. based on your intrestes we send you our new products +2. order status +*/ +interface OrderStatusEmailProps { + username?: string; + orderId?: string; + orderStatus?: string; + orderLink?: string; + userProfileLink?: string; +} + +export const OrderStatusEmail = ({ + username, + orderId, + orderStatus, + orderLink, +}: OrderStatusEmailProps) => ( + + + Your Order Status + + + + {username}, your order status update! +
+ + + Your order #{orderId} has been {orderStatus}! + + + {`Image + +
+ + + + Browse our full selection ・{" "} + CNeed help? Contact us! + + + + + Business Inc. ・123 Business St ・City, Country 12345 + + + + + +); + +OrderStatusEmail.PreviewProps = { + username: "Noa", + orderId: "284695713", + orderStatus: "Packed", + orderLink: "https://www.google.com/", + userProfileLink: "https://www.google.com/", +} as OrderStatusEmailProps; + +export default OrderStatusEmail; + +const section = { + padding: "30px", + border: "solid 1px #e5e5e5", + borderRadius: "8px", + textAlign: "center" as const, + backgroundColor: "#fdfdfd", + boxShadow: "0 6px 15px rgba(0, 0, 0, 0.05)", +}; + +const links = { + textAlign: "center" as const, +}; + +const link = { + color: "#0366d6", + fontSize: "12px", + textDecoration: "underline", +}; + +const button = { + fontSize: "16px", + backgroundColor: "#ff7f50", + color: "#fff", + padding: "14px 28px", + borderRadius: "5px", + textDecoration: "none", + display: "inline-block", + transition: "background-color 0.3s ease", + marginTop: "20px", + +}; + +const footer = { + fontSize: "12px", + color: "#b7b7b7", + lineHeight: "15px", + textAlign: "center" as const, + marginBottom: "50px", +}; + + +const main = { + backgroundColor: "#ffffff", + margin: "0 auto", + fontFamily: + "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", +}; + +const container = { + margin: "0 auto", + padding: "0px 20px", +}; + +const h1 = { + color: "#1d1c1d", + fontSize: "36px", + fontWeight: "700", + margin: "30px 0", + padding: "0", + lineHeight: "42px", + textAlign: "center" as const, +}; + +const heroText = { + fontSize: "20px", + lineHeight: "28px", + marginBottom: "30px", +}; + From 5916daadea4252328b27146563e8aa56d00dccc8 Mon Sep 17 00:00:00 2001 From: NS Date: Thu, 12 Sep 2024 18:38:52 +0300 Subject: [PATCH 2/5] update package img --- content-samples/react/emails/order-status/order-status-1.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content-samples/react/emails/order-status/order-status-1.tsx b/content-samples/react/emails/order-status/order-status-1.tsx index 83ee4cb..845f3f7 100644 --- a/content-samples/react/emails/order-status/order-status-1.tsx +++ b/content-samples/react/emails/order-status/order-status-1.tsx @@ -48,7 +48,7 @@ export const OrderStatusEmail = ({ {`Image Date: Thu, 12 Sep 2024 18:54:32 +0300 Subject: [PATCH 3/5] updated style --- .../emails/order-status/order-status-1.tsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/content-samples/react/emails/order-status/order-status-1.tsx b/content-samples/react/emails/order-status/order-status-1.tsx index 845f3f7..90877fb 100644 --- a/content-samples/react/emails/order-status/order-status-1.tsx +++ b/content-samples/react/emails/order-status/order-status-1.tsx @@ -2,24 +2,18 @@ import { Body, Button, Container, - Column, Head, Heading, Html, Img, Link, Preview, - Row, Section, Text, } from "@react-email/components"; import * as React from "react"; -/* -1. based on your intrestes we send you our new products -2. order status -*/ interface OrderStatusEmailProps { username?: string; orderId?: string; @@ -47,12 +41,9 @@ export const OrderStatusEmail = ({ Your order #{orderId} has been {orderStatus}! - {`Image