continued the kita-planer

2026-05-08 14:32:14 +02:00
parent b686e714ff
commit 7aff691803
85 changed files with 9434 additions and 588 deletions
@@ -0,0 +1,124 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+type DutyReminderEmailProps = {
+  familyName: string;
+  dutyName: string;
+  weekLabel: string;
+};
+
+export function DutyReminderEmail({
+  familyName,
+  dutyName,
+  weekLabel,
+}: DutyReminderEmailProps) {
+  return (
+    <Html lang="de">
+      <Head />
+      <Preview>
+        Erinnerung: {familyName} ist diese Woche fuer {dutyName} eingeteilt.
+      </Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Section style={styles.header}>
+            <Text style={styles.kicker}>Elterndienst</Text>
+            <Heading style={styles.heading}>Danke fuer eure Hilfe</Heading>
+            <Text style={styles.lead}>
+              Hallo {familyName}, diese Woche seid ihr fuer den Dienst{" "}
+              <strong>{dutyName}</strong> eingeteilt.
+            </Text>
+          </Section>
+
+          <Section style={styles.card}>
+            <Text style={styles.text}>
+              Zeitraum: <strong>{weekLabel}</strong>
+            </Text>
+            <Text style={styles.text}>
+              Danke, dass ihr mithelft, den Kita-Alltag verlaesslich zu
+              organisieren.
+            </Text>
+          </Section>
+
+          <Hr style={styles.hr} />
+          <Text style={styles.footer}>
+            Diese Erinnerung wurde automatisch vom Kita-Planer versendet.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+const styles = {
+  body: {
+    margin: 0,
+    backgroundColor: "#f7f5ef",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    color: "#24231f",
+  },
+  container: {
+    width: "100%",
+    maxWidth: "600px",
+    margin: "0 auto",
+    padding: "32px 20px",
+  },
+  header: {
+    padding: "28px",
+    backgroundColor: "#27423a",
+    borderRadius: "8px 8px 0 0",
+  },
+  kicker: {
+    margin: "0 0 20px",
+    color: "#d9e9c3",
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase" as const,
+  },
+  heading: {
+    margin: "0 0 12px",
+    color: "#ffffff",
+    fontSize: "30px",
+    lineHeight: "1.18",
+    fontWeight: 800,
+  },
+  lead: {
+    margin: 0,
+    color: "#eef4eb",
+    fontSize: "16px",
+    lineHeight: "1.55",
+  },
+  card: {
+    padding: "28px",
+    backgroundColor: "#ffffff",
+    border: "1px solid #dde3d7",
+    borderTop: "0",
+    borderRadius: "0 0 8px 8px",
+  },
+  text: {
+    margin: "0 0 16px",
+    color: "#3d423b",
+    fontSize: "16px",
+    lineHeight: "1.65",
+  },
+  hr: {
+    margin: "24px 0",
+    borderColor: "#dde3d7",
+  },
+  footer: {
+    margin: 0,
+    color: "#7b8279",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    textAlign: "center" as const,
+  },
+};