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 ( Aktiviere deinen Kita-Planer Account für {kitaName}

Kita-Planer

Einladung zur Kita-App Willkommen bei {kitaName} Hallo {parentName}, dein Eltern-Account wurde vorbereitet. Ü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. Falls der Button nicht funktioniert, kopiere diesen Link in deinen Browser: {inviteLink}

Diese Einladung wurde von deiner Kita erstellt. Wenn du sie nicht erwartet hast, kannst du diese E-Mail ignorieren. ); } 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, }, };