t.indorf
168 lines
4.0 KiB
TypeScript
168 lines
4.0 KiB
TypeScript
import {
|
|
Body,
|
|
Button,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
} from "@react-email/components";
|
|
|
|
import { baseBodyStyle, colors, fontStack } from "./_styles";
|
|
|
|
type InviteEmailProps = {
|
|
parentName: string;
|
|
kitaName: string;
|
|
inviteLink: string;
|
|
};
|
|
|
|
export function InviteEmail({
|
|
parentName,
|
|
kitaName,
|
|
inviteLink,
|
|
}: InviteEmailProps) {
|
|
return (
|
|
<Html lang="de">
|
|
<Head />
|
|
<Preview>Aktiviere deinen Kita-Planer Account für {kitaName}</Preview>
|
|
<Body style={styles.body}>
|
|
<Container style={styles.container}>
|
|
<Section style={styles.card}>
|
|
<Section style={styles.brandBar}>
|
|
<Text style={styles.brand}>Kita-Planer</Text>
|
|
</Section>
|
|
<Text style={styles.kicker}>Einladung zur Kita-App</Text>
|
|
<Heading style={styles.heading}>Willkommen bei {kitaName}</Heading>
|
|
<Text style={styles.lead}>
|
|
Hallo {parentName}, dein Eltern-Account wurde vorbereitet.
|
|
</Text>
|
|
|
|
<Text style={styles.text}>
|
|
Über den folgenden Link kannst du dein Passwort setzen und deinen
|
|
Account aktivieren. Danach hast du Zugriff auf die Kita-Planung,
|
|
Termine und deine Familiendaten.
|
|
</Text>
|
|
|
|
<Button href={inviteLink} style={styles.button}>
|
|
Account aktivieren
|
|
</Button>
|
|
|
|
<Text style={styles.fallbackText}>
|
|
Falls der Button nicht funktioniert, kopiere diesen Link in deinen
|
|
Browser:
|
|
</Text>
|
|
<Text style={styles.linkText}>{inviteLink}</Text>
|
|
</Section>
|
|
|
|
<Text style={styles.footer}>
|
|
Diese Einladung wurde von deiner Kita erstellt. Wenn du sie nicht
|
|
erwartet hast, kannst du diese E-Mail ignorieren.
|
|
</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
}
|
|
|
|
const styles = {
|
|
body: baseBodyStyle,
|
|
container: {
|
|
width: "100%",
|
|
maxWidth: "600px",
|
|
margin: "0 auto",
|
|
padding: "32px 20px",
|
|
fontFamily: fontStack,
|
|
},
|
|
card: {
|
|
padding: "0 28px 28px",
|
|
backgroundColor: colors.cardBg,
|
|
borderRadius: "10px",
|
|
border: `1px solid ${colors.border}`,
|
|
boxShadow: "0 10px 26px rgba(31, 59, 45, 0.08)",
|
|
overflow: "hidden",
|
|
fontFamily: fontStack,
|
|
},
|
|
brandBar: {
|
|
margin: "0 -28px 28px",
|
|
padding: "14px 28px",
|
|
backgroundColor: colors.brandGreen,
|
|
fontFamily: fontStack,
|
|
},
|
|
brand: {
|
|
margin: 0,
|
|
color: colors.eyebrow,
|
|
fontSize: "12px",
|
|
fontWeight: 800,
|
|
letterSpacing: "0.08em",
|
|
textTransform: "uppercase" as const,
|
|
fontFamily: fontStack,
|
|
},
|
|
kicker: {
|
|
margin: "0 0 10px",
|
|
color: colors.brandGreenAccent,
|
|
fontSize: "12px",
|
|
fontWeight: 800,
|
|
letterSpacing: "0.06em",
|
|
textTransform: "uppercase" as const,
|
|
fontFamily: fontStack,
|
|
},
|
|
heading: {
|
|
margin: "0 0 14px",
|
|
color: colors.textPrimary,
|
|
fontSize: "28px",
|
|
lineHeight: "34px",
|
|
fontWeight: 800,
|
|
fontFamily: fontStack,
|
|
},
|
|
lead: {
|
|
margin: "0 0 22px",
|
|
color: colors.textBody,
|
|
fontSize: "16px",
|
|
lineHeight: "24px",
|
|
fontFamily: fontStack,
|
|
},
|
|
text: {
|
|
margin: "0 0 24px",
|
|
color: colors.textBody,
|
|
fontSize: "15px",
|
|
lineHeight: "24px",
|
|
fontFamily: fontStack,
|
|
},
|
|
button: {
|
|
display: "inline-block",
|
|
padding: "14px 20px",
|
|
backgroundColor: colors.brandGreen,
|
|
color: "#ffffff",
|
|
borderRadius: "6px",
|
|
fontSize: "15px",
|
|
fontWeight: 700,
|
|
textDecoration: "none",
|
|
fontFamily: fontStack,
|
|
},
|
|
fallbackText: {
|
|
margin: "28px 0 8px",
|
|
color: colors.textMuted,
|
|
fontSize: "13px",
|
|
lineHeight: "20px",
|
|
fontFamily: fontStack,
|
|
},
|
|
linkText: {
|
|
margin: 0,
|
|
color: colors.link,
|
|
fontSize: "13px",
|
|
lineHeight: "20px",
|
|
wordBreak: "break-all" as const,
|
|
fontFamily: fontStack,
|
|
},
|
|
footer: {
|
|
margin: "20px 0 0",
|
|
color: colors.textFaint,
|
|
fontSize: "12px",
|
|
lineHeight: "18px",
|
|
textAlign: "center" as const,
|
|
fontFamily: fontStack,
|
|
},
|
|
};
|