✨ Translations for Email Notifications (#1278)

Co-authored-by: Niko Heller <hellerniko@gmail.com>
2025-07-13 14:37:27 +02:00 · 2024-09-02 19:30:58 +01:00 · 2024-09-02 19:30:58 +01:00 · f4218c3115
commit f4218c3115
parent aa52a0f26f
51 changed files with 1071 additions and 970 deletions
--- a/packages/emails/src/components/email-layout.tsx
+++ b/packages/emails/src/components/email-layout.tsx
@ -0,0 +1,72 @@
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Img,
+  Preview,
+  Section,
+} from "@react-email/components";
+import { Trans } from "react-i18next/TransWithoutContext";
+
+import { EmailContext } from "../types";
+import { darkTextColor, fontFamily, Link, Text } from "./styled-components";
+
+export interface EmailLayoutProps {
+  preview: string;
+  ctx: EmailContext;
+}
+
+const containerStyles = {
+  maxWidth: "480px",
+  margin: "0 auto",
+  background: "white",
+  fontFamily,
+  padding: "32px 8px",
+  color: darkTextColor,
+};
+
+export const EmailLayout = ({
+  preview,
+  children,
+  ctx,
+}: 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}
+          <Section style={{ marginTop: 32 }}>
+            <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>
+        </Container>
+      </Body>
+    </Html>
+  );
+};