feat(email): adota React Email em notificações e automações

2025-12-13 13:11:41 -03:00 · 2025-12-13 13:11:41 -03:00 · 4306b0504d
commit 4306b0504d
parent 58a1ed6b36
18 changed files with 940 additions and 337 deletions
--- a/emails/_components/layout.tsx
+++ b/emails/_components/layout.tsx
@ -0,0 +1,80 @@
+import * as React from "react"
+import { Body } from "@react-email/body"
+import { Container } from "@react-email/container"
+import { Head } from "@react-email/head"
+import { Html } from "@react-email/html"
+import { Img } from "@react-email/img"
+import { Preview } from "@react-email/preview"
+import { Section } from "@react-email/section"
+import { Text } from "@react-email/text"
+
+import { EMAIL_COLORS } from "./tokens"
+import { getEmailAssetUrl } from "./utils"
+
+export function RavenEmailLayout({
+  preview,
+  title,
+  children,
+}: {
+  preview?: string
+  title: string
+  children: React.ReactNode
+}) {
+  return (
+    <Html lang="pt-BR">
+      <Head />
+      {preview ? <Preview>{preview}</Preview> : null}
+      <Body
+        style={{
+          margin: 0,
+          padding: 0,
+          backgroundColor: EMAIL_COLORS.background,
+          fontFamily: "Arial, Helvetica, sans-serif",
+          color: EMAIL_COLORS.textPrimary,
+        }}
+      >
+        <Container style={{ padding: "28px 0" }}>
+          <Section
+            style={{
+              backgroundColor: EMAIL_COLORS.card,
+              border: `1px solid ${EMAIL_COLORS.border}`,
+              borderRadius: "16px",
+              padding: "24px",
+            }}
+          >
+            <table cellPadding="0" cellSpacing="0" role="presentation" style={{ width: "100%" }}>
+              <tbody>
+                <tr>
+                  <td style={{ verticalAlign: "middle" }}>
+                    <Img
+                      src={getEmailAssetUrl("/logo-raven.png")}
+                      alt="Raven"
+                      width="36"
+                      height="36"
+                      style={{ borderRadius: "10px", display: "block" }}
+                    />
+                  </td>
+                  <td style={{ verticalAlign: "middle", paddingLeft: "12px" }}>
+                    <Text style={{ margin: 0, fontSize: "18px", fontWeight: 800, color: EMAIL_COLORS.textPrimary }}>
+                      Raven
+                    </Text>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <Text style={{ margin: "16px 0 0 0", fontSize: "12px", color: EMAIL_COLORS.textMuted }}>
+              {title}
+            </Text>
+
+            {children}
+          </Section>
+
+          <Text style={{ margin: "14px 0 0 0", fontSize: "12px", color: EMAIL_COLORS.textMuted, textAlign: "center" }}>
+            &copy; {new Date().getFullYear()} Raven — Rever Tecnologia
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  )
+}