88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import {
|
|
Body,
|
|
Button,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Html,
|
|
Preview,
|
|
Text,
|
|
} from "@react-email/components";
|
|
import { baseBodyStyle, colors, fontStack } from "./_styles";
|
|
|
|
export function NotdienstAlarmEmail({
|
|
name,
|
|
kitaName,
|
|
message,
|
|
link,
|
|
request,
|
|
cancelled,
|
|
}: {
|
|
name: string;
|
|
kitaName: string;
|
|
message: string;
|
|
link: string;
|
|
request: boolean;
|
|
cancelled: boolean;
|
|
}) {
|
|
const title = request
|
|
? "Notdienst: Eure Rückmeldung zählt"
|
|
: cancelled
|
|
? "Notdiensteinsatz storniert"
|
|
: "Neuer Stand beim Notdienst";
|
|
return (
|
|
<Html lang="de">
|
|
<Head />
|
|
<Preview>
|
|
{title} · {kitaName}
|
|
</Preview>
|
|
<Body style={baseBodyStyle}>
|
|
<Container
|
|
style={{
|
|
maxWidth: "600px",
|
|
padding: "32px 24px",
|
|
fontFamily: fontStack,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: colors.textMuted,
|
|
fontSize: "12px",
|
|
letterSpacing: "0.08em",
|
|
}}
|
|
>
|
|
KITA-PLANER · {kitaName}
|
|
</Text>
|
|
<Heading style={{ color: request ? "#9f1239" : colors.textPrimary }}>
|
|
{title}
|
|
</Heading>
|
|
<Text>Hallo {name},</Text>
|
|
<Text style={{ lineHeight: "26px" }}>{message}</Text>
|
|
{request && (
|
|
<Text>
|
|
Eine Antwort gilt für euren ganzen Haushalt. Bitte wählt auf der
|
|
Rückmeldeseite „Wir übernehmen“ oder „Wir können nicht“.
|
|
</Text>
|
|
)}
|
|
<Button
|
|
href={link}
|
|
style={{
|
|
backgroundColor: request ? "#9f1239" : colors.brandGreen,
|
|
color: "#fff",
|
|
padding: "14px 20px",
|
|
borderRadius: "6px",
|
|
}}
|
|
>
|
|
{request
|
|
? "Für unseren Haushalt antworten"
|
|
: "Notdienstalarm öffnen"}
|
|
</Button>
|
|
<Text style={{ fontSize: "12px", color: colors.textMuted }}>
|
|
Falls der Button nicht funktioniert: {link}
|
|
</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
}
|