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,143 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+import {
+  contactRequestTypeLabels,
+  type ContactRequestInput,
+} from "@/lib/contact-schema";
+
+type ContactRequestEmailProps = ContactRequestInput;
+
+export function ContactRequestEmail({
+  name,
+  kitaName,
+  email,
+  requestType,
+  message,
+}: ContactRequestEmailProps) {
+  const inquiryLabel = contactRequestTypeLabels[requestType];
+
+  return (
+    <Html>
+      <Head />
+      <Preview>
+        Neue Kontaktanfrage von {name}
+        {kitaName ? ` (${kitaName})` : ""}
+      </Preview>
+      <Body style={body}>
+        <Container style={container}>
+          <Heading style={heading}>Neue Kontaktanfrage</Heading>
+          <Text style={intro}>
+            Über die Kita-Planer Landingpage ist eine neue Anfrage eingegangen.
+          </Text>
+
+          <Section style={details}>
+            <InfoRow label="Name" value={name} />
+            <InfoRow label="Kita / Initiative" value={kitaName || "Nicht angegeben"} />
+            <InfoRow label="E-Mail" value={email} />
+            <InfoRow label="Anliegen" value={inquiryLabel} />
+          </Section>
+
+          <Section style={messageBox}>
+            <Text style={label}>Nachricht</Text>
+            <Text style={messageText}>{message}</Text>
+          </Section>
+
+          <Text style={footer}>
+            Tipp: Direkt auf diese E-Mail antworten, um {name} unter {email} zu
+            erreichen.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <Text style={row}>
+      <strong>{label}:</strong> {value}
+    </Text>
+  );
+}
+
+const body = {
+  margin: 0,
+  backgroundColor: "#f8faf8",
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+};
+
+const container = {
+  margin: "0 auto",
+  padding: "32px 24px",
+  maxWidth: "620px",
+};
+
+const heading = {
+  margin: "0 0 12px",
+  color: "#0f172a",
+  fontSize: "28px",
+  lineHeight: "34px",
+};
+
+const intro = {
+  margin: "0 0 24px",
+  color: "#475569",
+  fontSize: "15px",
+  lineHeight: "24px",
+};
+
+const details = {
+  border: "1px solid #d7e5dc",
+  borderRadius: "10px",
+  backgroundColor: "#ffffff",
+  padding: "18px",
+};
+
+const row = {
+  margin: "0 0 10px",
+  color: "#0f172a",
+  fontSize: "15px",
+  lineHeight: "22px",
+};
+
+const messageBox = {
+  marginTop: "18px",
+  border: "1px solid #d7e5dc",
+  borderRadius: "10px",
+  backgroundColor: "#ffffff",
+  padding: "18px",
+};
+
+const label = {
+  margin: "0 0 8px",
+  color: "#64748b",
+  fontSize: "12px",
+  fontWeight: 700,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase" as const,
+};
+
+const messageText = {
+  margin: 0,
+  color: "#0f172a",
+  fontSize: "15px",
+  lineHeight: "24px",
+  whiteSpace: "pre-wrap" as const,
+};
+
+const footer = {
+  margin: "22px 0 0",
+  color: "#64748b",
+  fontSize: "13px",
+  lineHeight: "20px",
+};