diff --git a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx new file mode 100644 index 0000000..f89d0ce --- /dev/null +++ b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx @@ -0,0 +1,245 @@ +import React from 'react'; +import { + Body, + Container, + Column, + Head, + Heading, + Hr, + Html, + Img, + Link, + Row, + Section, + Text, + Preview, + Tailwind +} from "@react-email/components"; + + + +interface NovuAddToCartAlertProps { + username: string; + productName: string; + logoImg: string; + linkToUnsubscribe: string; + productList: Array<{name: string; description: string; image: string}> +} + +export const NovuAddToCartAlert = ({ + username, + productName, + logoImg, + linkToUnsubscribe, + productList, +}: NovuAddToCartAlertProps) => { + + return( + + + Check out these amazing products we've picked just for you! + + + + +
+ Novu Logo +
+ + Hello {username}, check out these amazing products! + + + We've hand-picked some items we think you'll love: + + +
+ + {productList.slice(0, 2).map((product, index) => ( + + {product.name} + {product.name} + {product.description} + + ))} + + + {productList.slice(2, 4).map((product, index) => ( + + {product.name} + {product.name} + {product.description} + + ))} + +
+ + + Love what you see?
Discover more products tailored just for you! +
Need assistance? We're just a click away and ready to help with any questions. + + + + Best regards,
Support Team + + +
+ +
+ {username} + +
{productName} + +
+ + + If you don't want to receive these alerts in the future,{' '} + click here + {' '}to change your notification settings. + + + + + + ); +}; + +const main = { + backgroundColor: "#f8c8dc", + fontFamily: 'Arial, sans-serif', +}; + +const container = { + margin: "0 auto", + padding: "20px 0 48px", + width: "580px", +}; + +const iconContainer = { + marginTop: "32px" +}; + +const h1 = { + color: "#ff69b4", + fontSize: "24px", + fontWeight: "bold", + margin: "30px 0", + padding: "0", +}; + +const subheading = { + color: "#c71585", + fontSize: "18px", + lineHeight: "26px", + margin: "0 0 20px", +}; + +const productRow = { + display: 'grid', + justifyContent: 'center', + alignItems: 'flex-start', + paddingLeft: '3%', + gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)' +}; + +const productColumn = { + verticalAlign: 'top', + width: '50%', + padding: '0 40px', + boxSizing: 'border-box' as const, + overflow: 'hidden', + textOverflow: 'ellipsis' +}; + +const imageStyle = { + marginLeft: 'auto', + marginRight: 'auto', + width: "182px", + height: "235px", + objectFit: "cover" as const, + borderRadius: "2px", + border: "4px solid #ff69b4", +}; + +const productNameStyle = { + color: "#ff69b4", + fontSize: "16px", + fontWeight: "bold", + margin: "10px 0 8px", +}; + +const productDescriptionStyle = { + color: "#c71585", + fontSize: "14px", + lineHeight: "20px", + margin: "0", + textAlign: "center" as const, +}; + +const text = { + color: '#c71585', + fontSize: '16px', + lineHeight: '24px', + margin: '24px 0', +}; + +const footer = { + color: '#c71585', + fontSize: '14px', + lineHeight: '24px', +}; + +const hr = { + borderColor: '#e5e7eb', + margin: '20px 0', +}; + +const link = { + color: '#3b82f6', + textDecoration: 'none', +}; + +const footerSection = { + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + gap: '10px', +}; + +const footerLogoStyle = { + display: 'block', + margin: '0 auto', +}; + +const centerImage = { + display: 'block', + margin: '0 auto', +}; + +NovuAddToCartAlert.PreviewProps = { + username: "Noa", + productName: "", + productLink: "", + logoImg: `https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/dca73b36-cf39-4e28-9bc7-8a0d0cd8ac70/standalone-gradient2x_2/w=128,quality=90,fit=scale-down`, + linkToUnsubscribe: "https://google.com", + productImage: "", + productList: [ + { name: "Classic White Sneakers", description: "Timeless style for everyday wear just trying to add words for you ", image: "https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + { name: "Leather Messenger Bag", description: "Perfect for work or casual outings", image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + { name: "Stainless Steel Watch", description: "Elegant timepiece for any", image: "https://images.unsplash.com/photo-1524592094714-0f0654e20314?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + { name: "Polarized Sunglasses", description: "Protect your eyes in style", image: "https://images.unsplash.com/photo-1511499767150-a48a237f0083?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + ] +} as NovuAddToCartAlertProps; + +export default NovuAddToCartAlert; \ No newline at end of file