t.indorf
167 lines
4.1 KiB
TypeScript
167 lines
4.1 KiB
TypeScript
import {
|
|
Body,
|
|
Button,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
} from "@react-email/components";
|
|
|
|
import { baseBodyStyle, colors, fontStack } from "./_styles";
|
|
|
|
type NotdienstAvailabilityReminderEmailProps = {
|
|
parentName: string;
|
|
kitaName: string;
|
|
monthLabel: string;
|
|
link: string;
|
|
};
|
|
|
|
export function NotdienstAvailabilityReminderEmail({
|
|
parentName,
|
|
kitaName,
|
|
monthLabel,
|
|
link,
|
|
}: NotdienstAvailabilityReminderEmailProps) {
|
|
return (
|
|
<Html lang="de">
|
|
<Head />
|
|
<Preview>Erinnerung: Verfügbarkeiten für den Notdienst {monthLabel} eintragen</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}>Erinnerung Notdienst-Planung</Text>
|
|
<Heading style={styles.heading}>Verfügbarkeiten für {monthLabel} eintragen</Heading>
|
|
<Text style={styles.lead}>
|
|
Hallo {parentName},
|
|
</Text>
|
|
|
|
<Text style={styles.text}>
|
|
für den Monat <strong>{monthLabel}</strong> läuft aktuell die Planung des Notdienstes in der Kita <strong>{kitaName}</strong>.
|
|
Bitte trage deine Verfügbarkeiten im Planer ein, damit wir die Tage fair verteilen können.
|
|
</Text>
|
|
|
|
<Button href={link} style={styles.button}>
|
|
Verfügbarkeiten eintragen
|
|
</Button>
|
|
|
|
<Text style={styles.fallbackText}>
|
|
Falls der Button nicht funktioniert, kopiere diesen Link in deinen Browser:
|
|
</Text>
|
|
<Text style={styles.linkText}>{link}</Text>
|
|
</Section>
|
|
|
|
<Text style={styles.footer}>
|
|
Diese Nachricht wurde automatisch vom Kita-Planer deiner Kita versendet.
|
|
</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,
|
|
},
|
|
};
|