81 lines
1.7 KiB
TypeScript
81 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import { Hr, Section, Text, Img } from "@react-email/components";
|
|
import { BaseLayout } from "./BaseLayout";
|
|
|
|
export interface ClientLayoutProps {
|
|
preview: string;
|
|
children: React.ReactNode;
|
|
clientLogo?: string;
|
|
clientName: string;
|
|
brandColor?: string;
|
|
}
|
|
|
|
export const ClientLayout = ({
|
|
preview,
|
|
children,
|
|
clientLogo,
|
|
clientName,
|
|
brandColor = "#82ed20",
|
|
}: ClientLayoutProps) => {
|
|
return (
|
|
<BaseLayout preview={preview} brandColor={brandColor}>
|
|
<Section style={header}>
|
|
{clientLogo ? (
|
|
<Img src={clientLogo} alt={clientName} height="40" style={logo} />
|
|
) : (
|
|
<Text style={logoText(brandColor)}>{clientName}</Text>
|
|
)}
|
|
</Section>
|
|
<Hr style={hr} />
|
|
<Section style={mainContent}>{children}</Section>
|
|
<Hr style={hr} />
|
|
<Section style={footer}>
|
|
<Text style={footerText}>
|
|
© 2026 {clientName}. All rights reserved.
|
|
</Text>
|
|
</Section>
|
|
</BaseLayout>
|
|
);
|
|
};
|
|
|
|
const header = {
|
|
marginBottom: "32px",
|
|
};
|
|
|
|
const logo = {
|
|
margin: "0 auto",
|
|
display: "block",
|
|
};
|
|
|
|
const logoText = (color: string) => ({
|
|
margin: "0 auto",
|
|
textAlign: "center" as const,
|
|
fontSize: "24px",
|
|
fontWeight: 900,
|
|
color: "#ffffff",
|
|
letterSpacing: "-0.02em",
|
|
borderLeft: `4px solid ${color}`,
|
|
paddingLeft: "12px",
|
|
});
|
|
|
|
const mainContent = {
|
|
marginBottom: "32px",
|
|
};
|
|
|
|
const hr = {
|
|
borderColor: "#222222",
|
|
margin: "20px 0",
|
|
};
|
|
|
|
const footer = {
|
|
marginTop: "32px",
|
|
textAlign: "center" as const,
|
|
};
|
|
|
|
const footerText = {
|
|
fontSize: "10px",
|
|
color: "#333333",
|
|
textTransform: "uppercase" as const,
|
|
letterSpacing: "0.1em",
|
|
};
|