import { Body, Container, Head, Heading, Hr, Html, Preview, Section, Text, } from "@react-email/components"; import { fontStack } from "./_styles"; type DutyReminderEmailProps = { familyName: string; dutyName: string; weekLabel: string; }; export function DutyReminderEmail({ familyName, dutyName, weekLabel, }: DutyReminderEmailProps) { return ( Erinnerung: {familyName} ist diese Woche für {dutyName} eingeteilt.

Elterndienst Danke für eure Hilfe Hallo {familyName}, diese Woche seid ihr für den Dienst{" "} {dutyName} eingeteilt.

Zeitraum: {weekLabel} Danke, dass ihr mithelft, den Kita-Alltag verlässlich zu organisieren.

Diese Erinnerung wurde automatisch vom Kita-Planer versendet. ); } const styles = { body: { margin: 0, backgroundColor: "#f7f5ef", fontFamily: fontStack, color: "#24231f", }, container: { width: "100%", maxWidth: "600px", margin: "0 auto", padding: "32px 20px", fontFamily: fontStack, }, header: { padding: "28px", backgroundColor: "#27423a", borderRadius: "8px 8px 0 0", fontFamily: fontStack, }, kicker: { margin: "0 0 20px", color: "#d9e9c3", fontSize: "12px", fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase" as const, fontFamily: fontStack, }, heading: { margin: "0 0 12px", color: "#ffffff", fontSize: "30px", lineHeight: "1.18", fontWeight: 800, fontFamily: fontStack, }, lead: { margin: 0, color: "#eef4eb", fontSize: "16px", lineHeight: "1.55", fontFamily: fontStack, }, card: { padding: "28px", backgroundColor: "#ffffff", border: "1px solid #dde3d7", borderTop: "0", borderRadius: "0 0 8px 8px", fontFamily: fontStack, }, text: { margin: "0 0 16px", color: "#3d423b", fontSize: "16px", lineHeight: "1.65", fontFamily: fontStack, }, hr: { margin: "24px 0", borderColor: "#dde3d7", }, footer: { margin: 0, color: "#7b8279", fontSize: "12px", lineHeight: "1.5", textAlign: "center" as const, fontFamily: fontStack, }, };