import { Body, Column, Container, Head, Html, Img, Link, Preview, Row, Section } from 'react-email';
import type { SharedProps } from '../props';
import { colors, fonts, radius } from './theme';
interface BaseTemplateProps extends SharedProps {
preview?: string;
children: React.ReactNode;
}
export const BaseTemplate = ({
logoURL,
appName,
appURL,
preview,
children
}: BaseTemplateProps) => (
{preview && {preview}}
{appName}
);
// The heading font is self-hosted by the app, so it loads from the same origin as the logo and works without third-party requests
// Clients without web font support fall back to the serif stack declared on the headings
const fontFaceCss = (appURL: string) =>
`@font-face{font-family:'Gloock';font-style:normal;font-weight:400;mso-font-alt:'Georgia';src:url(${appURL}/fonts/Gloock-Regular.woff) format('woff');}`;
const bodyStyle = {
margin: 0,
padding: '32px 16px',
backgroundColor: colors.background,
fontFamily: fonts.sans,
color: colors.text
};
const containerStyle = {
width: '100%',
maxWidth: '480px',
margin: '0 auto'
};
const headerStyle = {
marginBottom: '20px'
};
const logoColumnStyle = {
width: '36px',
verticalAlign: 'middle'
};
const logoStyle = {
display: 'block',
width: '28px',
height: '28px',
borderRadius: '6px'
};
const appNameStyle = {
fontFamily: fonts.serif,
fontSize: '20px',
lineHeight: '28px',
color: colors.foreground,
textDecoration: 'none'
};
const cardStyle = {
backgroundColor: colors.card,
border: `1px solid ${colors.border}`,
borderRadius: radius.card,
padding: '32px',
textAlign: 'left' as const
};