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 ( Erinnerung: Verfügbarkeiten für den Notdienst {monthLabel} eintragen

Kita-Planer

Erinnerung Notdienst-Planung Verfügbarkeiten für {monthLabel} eintragen Hallo {parentName}, für den Monat {monthLabel} läuft aktuell die Planung des Notdienstes in der Kita {kitaName}. Bitte trage deine Verfügbarkeiten im Planer ein, damit wir die Tage fair verteilen können. Falls der Button nicht funktioniert, kopiere diesen Link in deinen Browser: {link}

Diese Nachricht wurde automatisch vom Kita-Planer deiner Kita versendet. ); } 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, }, };