rallly/packages/emails/src/components/email-layout.tsx
2025-04-28 19:47:47 +01:00

76 lines
1.7 KiB
TypeScript

import {
Body,
Container,
Head,
Html,
Img,
Preview,
Section,
} from "@react-email/components";
import { Trans } from "react-i18next/TransWithoutContext";
import type { EmailContext } from "../types";
import { Link, Text, darkTextColor, fontFamily } from "./styled-components";
export interface EmailLayoutProps {
preview: string;
ctx: EmailContext;
poweredBy?: boolean;
}
const containerStyles = {
maxWidth: "480px",
margin: "0 auto",
background: "white",
fontFamily,
padding: "32px 8px",
color: darkTextColor,
};
export const EmailLayout = ({
preview,
children,
ctx,
poweredBy = true,
}: React.PropsWithChildren<EmailLayoutProps>) => {
const { logoUrl } = ctx;
return (
<Html>
<Head />
<Preview>{preview}</Preview>
<Body style={{ backgroundColor: "#FFFFFF" }}>
<Container style={containerStyles}>
<Img
src={logoUrl}
width="32"
height="32"
style={{
marginBottom: 32,
}}
alt="Rallly Logo"
/>
{children}
{poweredBy ? (
<Section>
<Text light={true}>
<Trans
i18n={ctx.i18n}
t={ctx.t}
i18nKey="common_poweredBy"
ns="emails"
defaults="Powered by <a>{{domain}}</a>"
values={{ domain: "rallly.co" }}
components={{
a: (
<Link href="https://rallly.co?utm_source=email&utm_medium=transactional" />
),
}}
/>
</Text>
</Section>
) : null}
</Container>
</Body>
</Html>
);
};