import React from 'react';
import {
Body,
Container,
Head,
Html,
Img,
Link,
Preview,
Section,
Text,
} from '@react-email/components';
import { theme } from '../theme';
import { logoDataUri } from '../utils/logoDataUri';
import { tCommon } from '../i18n/common';
import type { Locale } from '../i18n/types';
interface EmailLayoutProps {
preview: string;
children: React.ReactNode;
locale?: Locale;
logoUrl?: string;
}
export const EmailLayout = ({
preview,
children,
locale = 'en',
logoUrl = logoDataUri,
}: EmailLayoutProps) => {
const common = tCommon(locale);
return (
{preview}
© {new Date().getFullYear()} {theme.brand.name}. {common.allRights}
{theme.brand.address} · {theme.brand.phone}
{common.privacy}
{' · '}
{common.terms}
{' · '}
{theme.brand.email}
);
};
const main = {
backgroundColor: theme.colors.cream,
fontFamily: theme.fonts.sans,
};
const container = {
margin: '0 auto',
padding: '24px 0 48px',
maxWidth: '600px',
};
const header = {
padding: '28px 24px',
textAlign: 'center' as const,
backgroundColor: theme.colors.surface,
borderTop: `4px solid ${theme.colors.brand}`,
borderRadius: '12px 12px 0 0',
};
const logo = {
margin: '0 auto',
};
const content = {
backgroundColor: theme.colors.surface,
padding: '8px 28px 32px',
borderLeft: `1px solid ${theme.colors.line}`,
borderRight: `1px solid ${theme.colors.line}`,
};
const footer = {
backgroundColor: theme.colors.forest,
padding: '24px 28px',
borderRadius: '0 0 12px 12px',
textAlign: 'center' as const,
};
const footerText = {
color: '#C5C9B8',
fontSize: '12px',
lineHeight: '18px',
margin: '0 0 8px',
};
const footerLink = {
color: theme.colors.brand,
textDecoration: 'none',
};