import {
Body,
Button,
Container,
Head,
Html,
Img,
Link,
Preview,
Section,
Text,
} from '@react-email/components';
import type { ReactNode } from 'react';
import { brand, mono, sans } from './theme.js';
export const text = {
paragraph: {
fontSize: '14px',
lineHeight: '22px',
color: brand.foreground,
margin: '0 0 16px',
},
strong: { fontWeight: 600, color: brand.foreground },
muted: {
fontSize: '13px',
lineHeight: '20px',
color: brand.muted,
margin: '0',
},
} as const;
/** Mirrors the `default` button variant: bg-primary, rounded-lg, text-sm. */
export function ActionButton({
href,
children,
}: {
href: string;
children: ReactNode;
}) {
return (
);
}
/** The raw link, for clients that strip buttons. */
export function LinkFallback({ href }: { href: string }) {
return (
<>
Button not working? Paste this link into your browser:
{href}
);
}
export function EmailLayout({
preview,
heading,
appUrl,
children,
}: {
preview: string;
heading: string;
appUrl: string;
children: ReactNode;
}) {
return (