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,120 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+type NewsEmailProps = {
+  title: string;
+  content: string;
+  dashboardUrl: string;
+};
+
+export function NewsEmail({ title, content, dashboardUrl }: NewsEmailProps) {
+  const excerpt =
+    content.length > 420 ? `${content.slice(0, 420).trim()}...` : content;
+
+  return (
+    <Html lang="de">
+      <Head />
+      <Preview>Neue Kita-Ankündigung: {title}</Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Section style={styles.header}>
+            <Text style={styles.kicker}>Schwarzes Brett</Text>
+            <Heading style={styles.heading}>{title}</Heading>
+          </Section>
+
+          <Section style={styles.card}>
+            <Text style={styles.text}>{excerpt}</Text>
+            <Button href={dashboardUrl} style={styles.button}>
+              Im Kita-Planer lesen
+            </Button>
+          </Section>
+
+          <Hr style={styles.hr} />
+          <Text style={styles.footer}>
+            Diese offizielle Ankündigung wurde über den Kita-Planer versendet.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+const styles = {
+  body: {
+    margin: 0,
+    backgroundColor: "#f5f3ee",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    color: "#25231f",
+  },
+  container: {
+    width: "100%",
+    maxWidth: "600px",
+    margin: "0 auto",
+    padding: "32px 20px",
+  },
+  header: {
+    padding: "28px",
+    backgroundColor: "#243b36",
+    borderRadius: "8px 8px 0 0",
+  },
+  kicker: {
+    margin: "0 0 20px",
+    color: "#d8f2bd",
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase" as const,
+  },
+  heading: {
+    margin: 0,
+    color: "#ffffff",
+    fontSize: "28px",
+    lineHeight: "1.2",
+    fontWeight: 800,
+  },
+  card: {
+    padding: "28px",
+    backgroundColor: "#ffffff",
+    border: "1px solid #deded5",
+    borderTop: "0",
+    borderRadius: "0 0 8px 8px",
+  },
+  text: {
+    margin: "0 0 24px",
+    color: "#42423b",
+    fontSize: "15px",
+    lineHeight: "1.65",
+    whiteSpace: "pre-wrap" as const,
+  },
+  button: {
+    display: "inline-block",
+    padding: "13px 20px",
+    backgroundColor: "#f0b84b",
+    color: "#172119",
+    borderRadius: "6px",
+    fontSize: "15px",
+    fontWeight: 800,
+    textDecoration: "none",
+  },
+  hr: {
+    margin: "24px 0",
+    borderColor: "#deded5",
+  },
+  footer: {
+    margin: 0,
+    color: "#77766e",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    textAlign: "center" as const,
+  },
+};