50 lines
953 B
TypeScript
50 lines
953 B
TypeScript
import {
|
|
Body,
|
|
Container,
|
|
Head,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
} from "@react-email/components";
|
|
import * as React from "react";
|
|
|
|
export interface BaseLayoutProps {
|
|
preview: string;
|
|
children: React.ReactNode;
|
|
brandColor?: string;
|
|
}
|
|
|
|
export const BaseLayout = ({ preview, children }: BaseLayoutProps) => {
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>{preview}</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
<Section style={content}>{children}</Section>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
};
|
|
|
|
const main = {
|
|
backgroundColor: "#0a0a0a",
|
|
color: "#ffffff",
|
|
fontFamily:
|
|
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
|
|
};
|
|
|
|
const container = {
|
|
backgroundColor: "#0f0f0f",
|
|
margin: "0 auto",
|
|
padding: "40px 0",
|
|
maxWidth: "600px",
|
|
border: "1px solid #1a1a1a",
|
|
borderRadius: "12px",
|
|
};
|
|
|
|
const content = {
|
|
padding: "0 40px",
|
|
};
|