mirror of
https://github.com/lukevella/rallly.git
synced 2025-05-28 08:16:22 +02:00
113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
import {
|
|
Body,
|
|
Container,
|
|
Head,
|
|
Html,
|
|
Img,
|
|
Link,
|
|
Preview,
|
|
} from "@react-email/components";
|
|
|
|
import { EmailContext } from "./email-context";
|
|
import { fontFamily, Section, Text } from "./styled-components";
|
|
|
|
export interface EmailLayoutProps {
|
|
preview: string;
|
|
recipientName?: string;
|
|
footNote?: React.ReactNode;
|
|
ctx: EmailContext;
|
|
}
|
|
|
|
const containerStyles = {
|
|
maxWidth: "600px",
|
|
margin: "0 auto",
|
|
background: "white",
|
|
fontFamily,
|
|
padding: 16,
|
|
border: "1px solid #E2E8F0",
|
|
borderRadius: 5,
|
|
};
|
|
|
|
const sectionStyles = {
|
|
marginTop: "16px",
|
|
marginBottom: "16px",
|
|
};
|
|
|
|
const linkStyles = {
|
|
color: "#64748B",
|
|
marginRight: "8px",
|
|
};
|
|
|
|
export const EmailLayout = ({
|
|
preview,
|
|
recipientName,
|
|
children,
|
|
footNote,
|
|
ctx,
|
|
}: React.PropsWithChildren<EmailLayoutProps>) => {
|
|
const { logoUrl, baseUrl } = ctx;
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>{preview}</Preview>
|
|
<Body
|
|
style={{
|
|
backgroundColor: "#F3F4F6",
|
|
paddingTop: 20,
|
|
paddingBottom: 20,
|
|
}}
|
|
>
|
|
<Container style={containerStyles}>
|
|
<Img src={logoUrl} alt="Rallly" width={128} />
|
|
<Section style={sectionStyles}>
|
|
{recipientName ? <Text>Hallo {recipientName},</Text> : null}
|
|
{children}
|
|
{footNote ? (
|
|
<Text
|
|
style={{
|
|
color: "#64748B",
|
|
fontFamily,
|
|
paddingTop: 16,
|
|
marginTop: 32,
|
|
borderTop: "1px solid #e2e8f0",
|
|
}}
|
|
>
|
|
{footNote}
|
|
</Text>
|
|
) : null}
|
|
</Section>
|
|
<Section style={{ ...sectionStyles, fontSize: 14, marginBottom: 0 }}>
|
|
<Link style={linkStyles} href={baseUrl}>
|
|
Home
|
|
</Link>
|
|
<span> • </span>
|
|
<Link
|
|
style={linkStyles}
|
|
href="https://www.gruene.de/service/impressum"
|
|
>
|
|
Impressum
|
|
</Link>
|
|
<span> • </span>
|
|
<Link
|
|
style={linkStyles}
|
|
href="https://www.gruene.de/service/datenschutz"
|
|
>
|
|
Datenschutz
|
|
</Link>
|
|
<span> • </span>
|
|
<Link
|
|
style={linkStyles}
|
|
href="https://netz.gruene.de/de/wissenswerk/2024-08/die-neue-termite"
|
|
>
|
|
Hilfe
|
|
</Link>
|
|
<span> • </span>
|
|
<Link style={linkStyles} href="https://rallly.co">
|
|
Diese Anwendung basiert auf Rallly
|
|
</Link>
|
|
</Section>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
};
|