novuhq · noyshlomo · Sep 12, 2024 · Sep 12, 2024 · Sep 12, 2024 · Sep 12, 2024
diff --git a/content-samples/react/emails/newsletters/weekly-sales.tsx 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) => (
+    <Html>
+        <Head />
+        <Preview>Weekly Specials Just for You!</Preview>
+        <Body style={main}>
+            <Container style={container}>
+                <Heading style={heading}>Weekly Specials Just for You!</Heading>
+
+                <Container style={gridStyle}>
+                    <Section>
+                        <Row style={rowStyle}>
+                            {items.slice(0, 3).map((item, index) => (
+                                <Column key={index} style={columnStyle}>
+                                    <Img
+                                        src={item.imgSrc}
+                                        alt={`Sale item ${index + 1}`}
+                                        style={imageStyle}
+                                    />
+                                    <Text style={priceStyle}>Price: ${item.price}</Text>
+                                </Column>
+                            ))}
+                        </Row>
+                    </Section>
+
+
+                    <Section>
+                        <Row style={rowStyle}>
+                            {items.slice(3, 6).map((item, index) => (
+                                <Column key={index + 3} style={columnStyle}>
+                                    <Img
+                                        src={item.imgSrc}
+                                        alt={`Sale item ${index + 4}`}
+                                        style={imageStyle}
+                                    />
+                                    <Text style={priceStyle}>Price: ${item.price}</Text>
+                                </Column>
+                            ))}
+                        </Row>
+                    </Section>
+                </Container>
+
+                <Section style={buttonContainer}>
+                    <Link href={storeLink} style={storeButtonStyle}>
+                        Grab These Deals Today!
+                    </Link>
+                    <Text style={h2}>
+                        Hurry, These Deals Won't Last!
+                    </Text>
+
+                    <Text style={links}>
+                        <Link style={link} href="#">Browse our full selection</Link> ・{" "}
+                        <Link style={link} href="#">Need help? Contact us!</Link>
+                    </Text>
+
+                    <Text style={footer}>
+                        Business Inc. ・123 Business St ・City, Country 12345
+                    </Text>
+                </Section>
+            </Container>
+        </Body>
+    </Html>
+);
+
+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;
diff --git a/content-samples/react/emails/order-status/order-status-1.tsx 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) => (
+  <Html>
+    <Head />
+    <Preview>Your Order Status</Preview>
+    <Body style={main}>
+      <Container style={container}>
+
+        <Heading style={h1}>{username}, your order status update!</Heading>
+        <Section style={section}>
+
+          <Text style={heroText}>
+            Your order #{orderId} has been {orderStatus}!
+          </Text>
+
+          <Img style={img}
+            src={"https://cdn-icons-png.flaticon.com/512/65/65998.png"}
+            alt={`Image of ${orderStatus}`}
+          />
+          <Button style={button} href={orderLink}>
+            View Order Details
+          </Button>
+        </Section>
+
+
+        <Text style={links}>
+          <Link style={link} href="#">Browse our full selection</Link> ・{" "}
+          <Link style={link} href="#">Need help? Contact us!</Link>
+        </Text>
+
+
+        <Text style={footer}>
+          Business Inc. ・123 Business St ・City, Country 12345
+        </Text>
+
+      </Container>
+    </Body>
+  </Html>
+);
+
+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",
+};
+