548c2e44d4
- Usa @react-email/components nos templates para evitar módulos ausentes no Bun 1.3.1\n- Ajusta preload do bun test para expor global Element (evita crash do PrismJS)
73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import * as React from "react"
|
|
import { Body, Container, Head, Html, Img, Preview, Section, Text } from "@react-email/components"
|
|
|
|
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" }}>
|
|
© {new Date().getFullYear()} Raven — Rever Tecnologia
|
|
</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
)
|
|
}
|