|
| 1 | +import { |
| 2 | + Body, |
| 3 | + Button, |
| 4 | + Container, |
| 5 | + Head, |
| 6 | + Heading, |
| 7 | + Hr, |
| 8 | + Html, |
| 9 | + Img, |
| 10 | + Section, |
| 11 | + Text, |
| 12 | +} from "@react-email/components"; |
| 13 | +import * as React from "react"; |
| 14 | + |
| 15 | +export interface GenericEmailProps { |
| 16 | + title?: string; |
| 17 | + description?: string; |
| 18 | + ctaText?: string; |
| 19 | + ctaHref?: string; |
| 20 | + footer?: string; |
| 21 | +} |
| 22 | + |
| 23 | +export const GenericEmail = ({ |
| 24 | + title, |
| 25 | + description, |
| 26 | + ctaText, |
| 27 | + ctaHref, |
| 28 | + footer, |
| 29 | +}: GenericEmailProps) => ( |
| 30 | + <Html> |
| 31 | + <Head /> |
| 32 | + <Body style={styles.main}> |
| 33 | + <Container style={styles.container}> |
| 34 | + <Img |
| 35 | + src="https://proofkit.dev/_astro/proofkit.DNcFg0_B_1JN3Dz.webp" |
| 36 | + width="238" |
| 37 | + height="175" |
| 38 | + alt="ProofKit" |
| 39 | + style={styles.logo} |
| 40 | + /> |
| 41 | + |
| 42 | + {title ? <Heading style={styles.title}>{title}</Heading> : null} |
| 43 | + |
| 44 | + {description ? ( |
| 45 | + <Text style={styles.description}>{description}</Text> |
| 46 | + ) : null} |
| 47 | + |
| 48 | + {ctaText && ctaHref ? ( |
| 49 | + <Section style={styles.ctaSection}> |
| 50 | + <Button href={ctaHref} style={styles.ctaButton}> |
| 51 | + {ctaText} |
| 52 | + </Button> |
| 53 | + </Section> |
| 54 | + ) : null} |
| 55 | + |
| 56 | + {(title || description || (ctaText && ctaHref)) && ( |
| 57 | + <Hr style={styles.hr} /> |
| 58 | + )} |
| 59 | + |
| 60 | + {footer ? <Text style={styles.footer}>{footer}</Text> : null} |
| 61 | + </Container> |
| 62 | + </Body> |
| 63 | + </Html> |
| 64 | +); |
| 65 | + |
| 66 | +GenericEmail.PreviewProps = { |
| 67 | + title: "Welcome to ProofKit", |
| 68 | + description: |
| 69 | + "Thanks for trying ProofKit. This is a sample email template you can customize.", |
| 70 | + ctaText: "Get Started", |
| 71 | + ctaHref: "https://proofkit.dev", |
| 72 | + footer: "You received this email because you signed up for updates.", |
| 73 | +} as GenericEmailProps; |
| 74 | + |
| 75 | +export default GenericEmail; |
| 76 | + |
| 77 | +const styles = { |
| 78 | + main: { |
| 79 | + backgroundColor: "#ffffff", |
| 80 | + fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", |
| 81 | + }, |
| 82 | + container: { |
| 83 | + backgroundColor: "#ffffff", |
| 84 | + border: "1px solid #eee", |
| 85 | + borderRadius: "5px", |
| 86 | + boxShadow: "0 5px 10px rgba(20,50,70,.2)", |
| 87 | + marginTop: "20px", |
| 88 | + maxWidth: "520px", |
| 89 | + margin: "0 auto", |
| 90 | + padding: "48px 32px 36px", |
| 91 | + } as React.CSSProperties, |
| 92 | + logo: { |
| 93 | + margin: "0 auto 12px", |
| 94 | + display: "block", |
| 95 | + } as React.CSSProperties, |
| 96 | + title: { |
| 97 | + color: "#111827", |
| 98 | + fontSize: "22px", |
| 99 | + fontWeight: 600, |
| 100 | + lineHeight: "28px", |
| 101 | + margin: "8px 0 4px", |
| 102 | + textAlign: "center" as const, |
| 103 | + }, |
| 104 | + description: { |
| 105 | + color: "#374151", |
| 106 | + fontSize: "15px", |
| 107 | + lineHeight: "22px", |
| 108 | + margin: "8px 0 0", |
| 109 | + textAlign: "center" as const, |
| 110 | + }, |
| 111 | + ctaSection: { |
| 112 | + textAlign: "center" as const, |
| 113 | + marginTop: "20px", |
| 114 | + }, |
| 115 | + ctaButton: { |
| 116 | + backgroundColor: "#0a85ea", |
| 117 | + color: "#fff", |
| 118 | + fontSize: "14px", |
| 119 | + fontWeight: 600, |
| 120 | + lineHeight: "20px", |
| 121 | + textDecoration: "none", |
| 122 | + display: "inline-block", |
| 123 | + padding: "10px 16px", |
| 124 | + borderRadius: "6px", |
| 125 | + } as React.CSSProperties, |
| 126 | + hr: { |
| 127 | + borderColor: "#e5e7eb", |
| 128 | + margin: "24px 0 12px", |
| 129 | + }, |
| 130 | + footer: { |
| 131 | + color: "#6b7280", |
| 132 | + fontSize: "12px", |
| 133 | + lineHeight: "18px", |
| 134 | + textAlign: "center" as const, |
| 135 | + }, |
| 136 | +}; |
0 commit comments