Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 70x 70x 6x 6x | import React from "react";
import {
Body,
Container,
Head,
Heading,
Hr,
Html,
Preview,
Section,
Tailwind,
Text,
pixelBasedPreset,
} from "@react-email/components";
import { Trans, useTranslation } from "react-i18next";
import { Link } from "./components";
type Props = {
title: string;
subtitle: string;
children: React.ReactNode;
footerNote?: React.ReactNode;
};
const tailwindConfig = {
presets: [pixelBasedPreset],
theme: {
extend: {
colors: {
brand: "#ec0867",
canvas: "#eaebed",
ink: "#06090f",
muted: "#9a9ea6",
},
},
},
};
export const EmailLayout: React.FC<Props> = ({
title,
subtitle,
children,
footerNote,
}) => {
const { t } = useTranslation("email");
return (
<Tailwind config={tailwindConfig}>
<Html lang="en">
<Head />
<Preview>{title}</Preview>
<Body className="bg-canvas m-0 font-sans text-sm leading-[1.4]">
<Container className="mx-auto block w-full max-w-145 p-2.5">
<Heading className="text-ink m-[20px_0] text-center text-[35px] font-light capitalize">
{t("header")}
</Heading>
<Section className="box-border rounded-[3px] bg-white p-5">
<Heading
as="h3"
className="text-ink mb-2.5 text-[22px] font-normal"
>
{subtitle}
</Heading>
{children}
</Section>
<Section className="text-muted mt-2 text-center text-xs">
{footerNote}
<Text className="text-muted m-0 mb-4 text-xs">
{t("footer.link")}
</Text>
<Text className="text-muted m-0 mb-4 text-xs">
<Trans
t={t}
i18nKey="footer.unsubscribe"
components={{
a: (
<Link
className="text-muted underline"
navigate={{ to: "/" }}
/>
),
}}
/>
</Text>
<Hr className="border-0" />
<Text className="text-muted m-0 mb-4 text-xs">
<Trans
t={t}
i18nKey="footer.inspiredBy"
components={{
a: (
<Link
className="text-muted underline"
href="https://postdrop.io"
/>
),
}}
/>
</Text>
</Section>
</Container>
</Body>
</Html>
</Tailwind>
);
};
|