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..15f8f3f --- /dev/null +++ b/content-samples/react/emails/newsletters/weekly-sales.tsx @@ -0,0 +1,201 @@ +import { + Body, + Container, + Head, + Heading, + Html, + Img, + Preview, + Section, + Text, + Link, + Row, + Column, +} 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, 3).map((item, index) => ( + + {`Sale + Price: ${item.price} + + ))} + +
+ + +
+ + {items.slice(3, 6).map((item, index) => ( + + {`Sale + Price: ${item.price} + + ))} + +
+ + +
+ + Grab These Deals Today! + + + Hurry, These Deals Won't Last! + + + + Browse our full selection ・{" "} + Need 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 gridStyle = { + background: "rgb(245, 244, 245)", + borderRadius: "4px", + marginBottom: "30px", + padding: "5px 5px", +}; + +const rowStyle = { + display: 'flex', + justifyContent: 'space-between', + flexWrap: 'wrap' as const, + margin: '10px 0', +}; + +const columnStyle = { + width: '32%', + textAlign: 'center' as const, + margin: '10px', + padding: '8px', +}; + +const imageStyle = { + width: '100%', + maxWidth: '180px', + height: 'auto', + aspectRatio: '1 / 1', + objectFit: 'cover' as const, + borderRadius: '5px', + +}; + +const priceStyle = { + fontWeight: 'bold', + marginTop: '5px', + fontSize: "18px", +}; + +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 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; \ No newline at end of file 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..1eea9b1 --- /dev/null +++ b/content-samples/react/emails/order-status/order-status-1.tsx @@ -0,0 +1,157 @@ +import { + Body, + Button, + Container, + Head, + Heading, + Html, + Img, + Link, + Preview, + Section, + Text, +} from "@react-email/components"; +import * as React from "react"; + + +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 ・{" "} + Need 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 img = { + marginBottom: "20px", + display: "block", + margin: "0 auto", + borderRadius: "10px", + width: "60%", + height: "auto", +}; + + +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", +}; +