4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T1ce1,import type { CSSProperties } from "react"; import { Body, Column, Container, Head as EmailHead, Html, Img, Preview, Row, Section, Tailwind, Text, } from "react-email"; import { DefaultFonts } from "@/components/email/font-default"; import { createEmailTailwindConfig } from "@/components/email/email-theme"; import type { EmailTheme } from "@/components/email/email-theme"; import { emailAsset } from "@/components/email/email-assets"; import { defaultTheme } from "@/components/email/theme-default"; export type ContentAlignment = "left" | "center" | "right"; export type ContentLayout = | "title" | "paragraph" | "two-columns" | "two-columns-with-icons"; export type ContentPadding = "regular" | "large"; export type ContentVariant = "small" | "large" | "lead" | "body"; export interface ContentProps { alignment?: ContentAlignment; column1?: string; column2?: string; iconAlt1?: string; iconAlt2?: string; iconSrc1?: string; iconSrc2?: string; layout?: ContentLayout; padding?: ContentPadding; text?: string; theme?: EmailTheme; title?: string; variant?: ContentVariant; } const colors = { background: "#fffffe", heading: "#030712", muted: "#4b5563", } as const; const fontFamily = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'; const defaultIconSources = [ emailAsset("social/icon-github.png"), emailAsset("social/icon-slack.png"), ] as const; const getImageMargin = (alignment: ContentAlignment) => { if (alignment === "center") { return "0 auto 10px"; } if (alignment === "right") { return "0 0 10px auto"; } return "0 auto 10px 0"; }; const getTitleTypography = (variant?: ContentVariant) => { if (variant === "large") { return { fontSize: "30px", lineHeight: "36px" }; } return { fontSize: "24px", lineHeight: "32px" }; }; const getParagraphTypography = (variant?: ContentVariant) => { if (variant === "body") { return { fontSize: "16px", lineHeight: "24px" }; } return { fontSize: "18px", lineHeight: "28px" }; }; const ContentColumn = ({ alignment, alt, fontSize, iconSrc, index, lineHeight, text, withIcon, }: { alignment: ContentAlignment; alt: string; fontSize: string; iconSrc: string; index: 0 | 1; lineHeight: string; text: string; withIcon: boolean; }) => { const columnPadding = index === 0 ? "0 22px 0 0" : "0 0 0 22px"; return ( {withIcon ? (

) : null} {text} ); }; export const ContentSection = ({ alignment = "center", column1 = "A brief introduction that highlights the key idea in a clear, engaging way.", column2 = "A brief introduction that highlights the key idea in a clear, engaging way.", iconAlt1 = "GitHub", iconAlt2 = "Slack", iconSrc1 = defaultIconSources[0], iconSrc2 = defaultIconSources[1], layout = "paragraph", padding = "regular", text = "Lead text introduces the reader to the key message of an email. It sets the tone, provides context, and guides attention toward what matters most.", title = "Stay in the loop by following us across our social channels.", variant, }: Omit) => { const horizontalPadding = padding === "large" ? "64px" : "24px"; const sectionStyle: CSSProperties = { backgroundColor: colors.background, padding: `44px ${horizontalPadding}`, }; if (layout === "title") { const typography = getTitleTypography(variant); return (

{title}

); } const typography = getParagraphTypography(variant); if (layout === "two-columns" || layout === "two-columns-with-icons") { const withIcons = layout === "two-columns-with-icons"; return (

); } return (

{text}

); }; export const Content = ({ alignment = "center", column1, column2, iconAlt1, iconAlt2, iconSrc1, iconSrc2, layout = "paragraph", padding = "regular", text, theme = defaultTheme, title, variant, }: ContentProps) => (