'use client'
import { Body, Container, Head, Html, Link, Preview, Section, Text } from 'react-email'
import { EmailThemeProvider, useEmailTheme } from './context'
import { createEmailTheme, type EmailTheme, type EmailThemeOverride } from './theme'
export interface EmailLayoutProps {
preview: string
children: React.ReactNode
theme?: EmailTheme | EmailThemeOverride
year?: number
}
function resolveTheme(theme: EmailLayoutProps['theme']): EmailTheme {
if (!theme) return createEmailTheme()
if ('colors' in theme && 'brand' in theme && 'fontFamily' in theme) {
return theme as EmailTheme
}
return createEmailTheme(theme as EmailThemeOverride)
}
export function EmailLayout({ preview, children, theme, year }: EmailLayoutProps) {
const resolved = resolveTheme(theme)
const { colors, brand, fontFamily } = resolved
const footerYear = year ?? new Date().getFullYear()
return (
{preview}
© {footerYear} {brand.footer}
)
}
export interface EmailHeadingProps {
children: React.ReactNode
kicker?: string
}
export function EmailHeading({ children, kicker }: EmailHeadingProps) {
const { colors } = useEmailTheme()
return (
<>
{kicker && (
{kicker}
)}
{children}
)
}
export interface EmailBodyTextProps {
children: React.ReactNode
muted?: boolean
size?: 'sm' | 'base'
style?: React.CSSProperties
}
export function EmailBodyText({ children, muted, size = 'base', style }: EmailBodyTextProps) {
const { colors } = useEmailTheme()
return (
{children}
)
}
export interface EmailButtonProps {
href: string
children: React.ReactNode
variant?: 'primary' | 'destructive'
}
export function EmailButton({ href, children, variant = 'primary' }: EmailButtonProps) {
const { colors } = useEmailTheme()
const backgroundColor =
variant === 'destructive' ? colors.destructive : (colors.primary ?? colors.fgStrong)
return (
)
}
export interface EmailFallbackProps {
url: string
label?: string
}
export function EmailFallback({
url,
label = 'If the button does not work, copy this link:',
}: EmailFallbackProps) {
const { colors } = useEmailTheme()
return (
)
}