Marc Mintel
53ad9f23d8
Some checks failed
Monorepo Pipeline / ⚡ Prioritize Release (push) Successful in 3s
Monorepo Pipeline / 🧹 Lint (push) Failing after 1m24s
Monorepo Pipeline / 🧪 Test (push) Successful in 41s
Monorepo Pipeline / 🏗️ Build (push) Successful in 2m4s
Monorepo Pipeline / 🚀 Release (push) Has been skipped
Monorepo Pipeline / 🐳 Build Gatekeeper (Product) (push) Has been skipped
Monorepo Pipeline / 🐳 Build Build-Base (push) Has been skipped
Monorepo Pipeline / 🐳 Build Production Runtime (push) Has been skipped
🏥 Server Maintenance / 🧹 Prune & Clean (push) Failing after 7s
198 lines
4.8 KiB
TypeScript
198 lines
4.8 KiB
TypeScript
import {
|
|
Body,
|
|
Container,
|
|
Head,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
Img,
|
|
} from "@react-email/components";
|
|
import * as React from "react";
|
|
|
|
export interface GatekeeperLayoutProps {
|
|
preview: string;
|
|
projectName?: string;
|
|
subTitle?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const GatekeeperLayout = ({ preview, projectName = "MINTEL", subTitle = "INFRASTRUCTURE", children }: GatekeeperLayoutProps) => {
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>{preview}</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
|
|
{/* Top Icon Box */}
|
|
<Section style={iconBoxSection}>
|
|
<div style={iconBox}>
|
|
<Img
|
|
src="https://mintel.me/favicon-32x32.png"
|
|
width={28}
|
|
height={28}
|
|
alt="Mintel"
|
|
style={iconImg}
|
|
/>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Title Area */}
|
|
<Section style={titleSection}>
|
|
<Text style={gatekeeperTitle}>
|
|
{projectName} <span style={{ color: "rgba(0,0,0,0.3)" }}>GATEKEEPER</span>
|
|
</Text>
|
|
|
|
<table align="center" width="100%" border={0} cellPadding={0} cellSpacing={0} role="presentation">
|
|
<tbody>
|
|
<tr>
|
|
<td width="30%" align="right"><div style={lineGradientRight} /></td>
|
|
<td width="40%" align="center">
|
|
<Text style={gatekeeperSub}>
|
|
{subTitle}
|
|
</Text>
|
|
</td>
|
|
<td width="30%" align="left"><div style={lineGradientLeft} /></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Section>
|
|
|
|
{/* Main Content Area */}
|
|
<Section style={contentSection}>
|
|
{children}
|
|
</Section>
|
|
|
|
{/* Footer Area */}
|
|
<Section style={footerSection}>
|
|
<div style={lineGradientCenter} />
|
|
<div style={{ marginTop: "24px" }}>
|
|
<Img
|
|
src="https://mintel.me/favicon-32x32.png"
|
|
width={24}
|
|
height={24}
|
|
alt={projectName}
|
|
style={{ opacity: 0.3, margin: "0 auto", display: "block" }}
|
|
/>
|
|
</div>
|
|
<Text style={footerText}>
|
|
© {new Date().getFullYear()} MINTEL
|
|
</Text>
|
|
</Section>
|
|
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
};
|
|
|
|
const main = {
|
|
backgroundColor: "#f5f5f7",
|
|
color: "#111111",
|
|
fontFamily:
|
|
'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
|
|
WebkitFontSmoothing: "antialiased" as const,
|
|
};
|
|
|
|
const container = {
|
|
margin: "0 auto",
|
|
padding: "40px 20px 80px",
|
|
maxWidth: "420px",
|
|
};
|
|
|
|
const iconBoxSection = {
|
|
textAlign: "center" as const,
|
|
marginBottom: "40px",
|
|
};
|
|
|
|
const iconBox = {
|
|
width: "56px",
|
|
height: "56px",
|
|
backgroundColor: "#ffffff",
|
|
borderRadius: "16px",
|
|
margin: "0 auto",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
border: "1px solid rgba(0,0,0,0.06)",
|
|
boxShadow: "0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.03)",
|
|
};
|
|
|
|
const iconImg = {
|
|
margin: "14px auto",
|
|
display: "block",
|
|
opacity: 0.8,
|
|
filter: "grayscale(100%) brightness(0)",
|
|
};
|
|
|
|
const titleSection = {
|
|
textAlign: "center" as const,
|
|
marginBottom: "32px",
|
|
};
|
|
|
|
const gatekeeperTitle = {
|
|
fontSize: "11px",
|
|
fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
|
|
fontWeight: "bold",
|
|
textTransform: "uppercase" as const,
|
|
letterSpacing: "0.5em",
|
|
color: "rgba(0,0,0,0.8)",
|
|
margin: "0 0 12px 0",
|
|
};
|
|
|
|
const gatekeeperSub = {
|
|
fontSize: "8px",
|
|
fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
|
|
textTransform: "uppercase" as const,
|
|
letterSpacing: "0.35em",
|
|
fontWeight: 600,
|
|
color: "rgba(0,0,0,0.3)",
|
|
margin: "0",
|
|
};
|
|
|
|
const lineGradientRight = {
|
|
height: "1px",
|
|
width: "32px",
|
|
backgroundColor: "rgba(0,0,0,0.1)",
|
|
marginLeft: "auto",
|
|
};
|
|
|
|
const lineGradientLeft = {
|
|
height: "1px",
|
|
width: "32px",
|
|
backgroundColor: "rgba(0,0,0,0.1)",
|
|
marginRight: "auto",
|
|
};
|
|
|
|
const contentSection = {
|
|
backgroundColor: "#ffffff",
|
|
padding: "32px",
|
|
borderRadius: "24px",
|
|
border: "1px solid rgba(0,0,0,0.06)",
|
|
boxShadow: "0 4px 6px -1px rgba(0,0,0,0.03)",
|
|
marginBottom: "32px",
|
|
};
|
|
|
|
const footerSection = {
|
|
textAlign: "center" as const,
|
|
paddingTop: "24px",
|
|
};
|
|
|
|
const lineGradientCenter = {
|
|
height: "1px",
|
|
width: "64px",
|
|
backgroundColor: "rgba(0,0,0,0.1)",
|
|
margin: "0 auto",
|
|
};
|
|
|
|
const footerText = {
|
|
fontSize: "7px",
|
|
fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
|
|
fontWeight: 600,
|
|
color: "rgba(0,0,0,0.25)",
|
|
textTransform: "uppercase" as const,
|
|
letterSpacing: "0.5em",
|
|
marginTop: "20px",
|
|
};
|