3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-08 21:51:49 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Revert using tailwind for email templates (#1003)

Browse source
This commit is contained in:
Luke Vella 2024-01-28 19:54:46 +07:00 • committed by GitHub
parent 193dc30b91
commit cf9aa4408a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 67 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

120
packages/emails/src/templates/_components/email-layout.tsx
View file

@ -6,11 +6,10 @@ import {
Img, Img,
Link, Link,
Preview, Preview,
Tailwind,
} from "@react-email/components"; } from "@react-email/components";
import { EmailContext } from "./email-context"; import { EmailContext } from "./email-context";
import { Section, Text } from "./styled-components"; import { fontFamily, Section, Text } from "./styled-components";
export interface EmailLayoutProps { export interface EmailLayoutProps {
preview: string; preview: string;
@ -19,11 +18,26 @@ export interface EmailLayoutProps {
ctx: EmailContext; ctx: EmailContext;
} }
const containerStyles = {
maxWidth: "600px",
margin: "0 auto",
background: "white",
fontFamily,
padding: 16,
border: "1px solid #E2E8F0",
borderRadius: 5,
};
const sectionStyles = { const sectionStyles = {
marginTop: "16px", marginTop: "16px",
marginBottom: "16px", marginBottom: "16px",
}; };
const linkStyles = {
color: "#64748B",
marginRight: "8px",
};
export const EmailLayout = ({ export const EmailLayout = ({
preview, preview,
recipientName = "Guest", recipientName = "Guest",
@ -33,58 +47,58 @@ export const EmailLayout = ({
}: React.PropsWithChildren<EmailLayoutProps>) => { }: React.PropsWithChildren<EmailLayoutProps>) => {
const { logoUrl, baseUrl } = ctx; const { logoUrl, baseUrl } = ctx;
return ( return (
<Tailwind> <Html>
<Html> <Head />
<Head /> <Preview>{preview}</Preview>
<Preview>{preview}</Preview> <Body style={{ backgroundColor: "#F3F4F6", padding: "16px" }}>
<Body className="bg-gray-50 py-5"> <Container style={containerStyles}>
<Container className="w-full rounded-md border border-solid border-gray-200 bg-white p-4"> <Img src={logoUrl} alt="Rallly" width={128} />
<Img src={logoUrl} alt="Rallly" width={128} /> <Section style={sectionStyles}>
<Section style={sectionStyles}> <Text>Hi {recipientName},</Text>
<Text>Hi {recipientName},</Text> {children}
{children}
</Section>
{footNote ? ( {footNote ? (
<Section className="border-t border-solid border-gray-200"> <Text
<Text className="text-sm text-gray-500">{footNote}</Text> style={{
</Section> color: "#64748B",
fontFamily,
paddingTop: 16,
marginTop: 32,
borderTop: "1px solid #e2e8f0",
}}
>
{footNote}
</Text>
) : null} ) : null}
<Section className="my-0 font-sans text-sm text-gray-500"> </Section>
<Link className="text-gray-500" href={baseUrl}> <Section style={{ ...sectionStyles, fontSize: 14, marginBottom: 0 }}>
Home <Link style={linkStyles} href={baseUrl}>
</Link> Home
<span>&nbsp;&bull;&nbsp;</span> </Link>
<Link <span>&nbsp;&bull;&nbsp;</span>
className="text-gray-500" <Link style={linkStyles} href="https://twitter.com/ralllyco">
href="https://twitter.com/ralllyco" Twitter
> </Link>
Twitter <span>&nbsp;&bull;&nbsp;</span>
</Link> <Link style={linkStyles} href="https://github.com/lukevella/rallly">
<span>&nbsp;&bull;&nbsp;</span> Github
<Link </Link>
className="text-gray-500" <span>&nbsp;&bull;&nbsp;</span>
href="https://github.com/lukevella/rallly" <Link
> style={linkStyles}
Github href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"
</Link> >
<span>&nbsp;&bull;&nbsp;</span> Donate
<Link </Link>
className="text-gray-500" <span>&nbsp;&bull;&nbsp;</span>
href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E" <Link
> style={linkStyles}
Donate href={`mailto:${process.env["SUPPORT_EMAIL"]}`}
</Link> >
<span>&nbsp;&bull;&nbsp;</span> Contact
<Link </Link>
className="text-gray-500" </Section>
href={`mailto:${process.env["SUPPORT_EMAIL"]}`} </Container>
> </Body>
Contact </Html>
</Link>
</Section>
</Container>
</Body>
</Html>
</Tailwind>
); );
}; };