t.indorf
187 lines
4.3 KiB
TypeScript
187 lines
4.3 KiB
TypeScript
import {
|
|
Body,
|
|
Button,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Hr,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
} from "@react-email/components";
|
|
|
|
type AlertEmailProps = {
|
|
date: string;
|
|
childName: string;
|
|
confirmLink: string;
|
|
};
|
|
|
|
export function AlertEmail({
|
|
date,
|
|
childName,
|
|
confirmLink,
|
|
}: AlertEmailProps) {
|
|
return (
|
|
<Html lang="de">
|
|
<Head />
|
|
<Preview>Dringender Notdienst-Alarm fuer {date}</Preview>
|
|
<Body style={styles.body}>
|
|
<Container style={styles.container}>
|
|
<Section style={styles.alertBar}>
|
|
<Text style={styles.kicker}>Dringend</Text>
|
|
<Heading style={styles.heading}>Notdienst heute bestaetigen</Heading>
|
|
<Text style={styles.lead}>
|
|
Eine Fachkraft ist ausgefallen. Fuer {childName} ist ein
|
|
Notdienst-Einsatz am {date} hinterlegt.
|
|
</Text>
|
|
</Section>
|
|
|
|
<Section style={styles.card}>
|
|
<Text style={styles.text}>
|
|
Bitte bestaetige schnell, ob du den Notdienst uebernehmen kannst,
|
|
damit die Kita den Tag verlaesslich planen kann.
|
|
</Text>
|
|
|
|
<Button href={confirmLink} style={styles.button}>
|
|
Notdienst bestaetigen
|
|
</Button>
|
|
|
|
<Section style={styles.detailBox}>
|
|
<Text style={styles.detailLabel}>Einsatzdatum</Text>
|
|
<Text style={styles.detailValue}>{date}</Text>
|
|
<Text style={styles.detailLabel}>Kind</Text>
|
|
<Text style={styles.detailValue}>{childName}</Text>
|
|
</Section>
|
|
|
|
<Text style={styles.fallbackText}>
|
|
Falls der Button nicht funktioniert, kopiere diesen Link in deinen
|
|
Browser:
|
|
</Text>
|
|
<Text style={styles.linkText}>{confirmLink}</Text>
|
|
</Section>
|
|
|
|
<Hr style={styles.hr} />
|
|
<Text style={styles.footer}>
|
|
Diese Nachricht wurde automatisch vom Kita-Planer versendet.
|
|
</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
}
|
|
|
|
const styles = {
|
|
body: {
|
|
margin: 0,
|
|
backgroundColor: "#fff7ed",
|
|
fontFamily:
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
color: "#30170f",
|
|
},
|
|
container: {
|
|
width: "100%",
|
|
maxWidth: "600px",
|
|
margin: "0 auto",
|
|
padding: "32px 20px",
|
|
},
|
|
alertBar: {
|
|
padding: "26px 28px",
|
|
backgroundColor: "#9f1239",
|
|
borderRadius: "8px 8px 0 0",
|
|
},
|
|
kicker: {
|
|
display: "inline-block",
|
|
margin: "0 0 18px",
|
|
padding: "6px 10px",
|
|
backgroundColor: "#fed7aa",
|
|
color: "#7f1d1d",
|
|
borderRadius: "999px",
|
|
fontSize: "12px",
|
|
fontWeight: 800,
|
|
letterSpacing: "0.08em",
|
|
textTransform: "uppercase" as const,
|
|
},
|
|
heading: {
|
|
margin: "0 0 12px",
|
|
color: "#ffffff",
|
|
fontSize: "30px",
|
|
lineHeight: "1.16",
|
|
fontWeight: 850,
|
|
},
|
|
lead: {
|
|
margin: 0,
|
|
color: "#ffe4e6",
|
|
fontSize: "16px",
|
|
lineHeight: "1.55",
|
|
},
|
|
card: {
|
|
padding: "28px",
|
|
backgroundColor: "#ffffff",
|
|
border: "1px solid #fed7aa",
|
|
borderTop: "0",
|
|
borderRadius: "0 0 8px 8px",
|
|
},
|
|
text: {
|
|
margin: "0 0 22px",
|
|
color: "#44251a",
|
|
fontSize: "16px",
|
|
lineHeight: "1.65",
|
|
},
|
|
button: {
|
|
display: "inline-block",
|
|
padding: "14px 22px",
|
|
backgroundColor: "#ea580c",
|
|
color: "#ffffff",
|
|
borderRadius: "6px",
|
|
fontSize: "15px",
|
|
fontWeight: 800,
|
|
textDecoration: "none",
|
|
},
|
|
detailBox: {
|
|
margin: "28px 0 0",
|
|
padding: "18px",
|
|
backgroundColor: "#fff7ed",
|
|
border: "1px solid #fdba74",
|
|
borderRadius: "6px",
|
|
},
|
|
detailLabel: {
|
|
margin: "0 0 4px",
|
|
color: "#9a3412",
|
|
fontSize: "12px",
|
|
fontWeight: 800,
|
|
letterSpacing: "0.06em",
|
|
textTransform: "uppercase" as const,
|
|
},
|
|
detailValue: {
|
|
margin: "0 0 14px",
|
|
color: "#30170f",
|
|
fontSize: "16px",
|
|
fontWeight: 700,
|
|
},
|
|
fallbackText: {
|
|
margin: "26px 0 8px",
|
|
color: "#7c5a4b",
|
|
fontSize: "13px",
|
|
lineHeight: "1.5",
|
|
},
|
|
linkText: {
|
|
margin: 0,
|
|
color: "#be123c",
|
|
fontSize: "13px",
|
|
lineHeight: "1.5",
|
|
wordBreak: "break-all" as const,
|
|
},
|
|
hr: {
|
|
margin: "24px 0",
|
|
borderColor: "#fed7aa",
|
|
},
|
|
footer: {
|
|
margin: 0,
|
|
color: "#8b6f63",
|
|
fontSize: "12px",
|
|
lineHeight: "1.5",
|
|
textAlign: "center" as const,
|
|
},
|
|
};
|