118 lines
2.6 KiB
TypeScript
118 lines
2.6 KiB
TypeScript
import {
|
|
Body,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
} from "@react-email/components";
|
|
|
|
interface TrainerAssignmentEmailProps {
|
|
clientName: string;
|
|
trainerName: string;
|
|
}
|
|
|
|
export function TrainerAssignmentEmail({
|
|
clientName,
|
|
trainerName,
|
|
}: TrainerAssignmentEmailProps) {
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>You've been assigned a trainer - {trainerName}</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
<Heading style={h1}>Great News! 🎯</Heading>
|
|
<Text style={text}>Hi {clientName},</Text>
|
|
<Text style={text}>
|
|
You've been assigned a personal trainer to help you reach your
|
|
fitness goals!
|
|
</Text>
|
|
<Section style={section}>
|
|
<Heading style={h2}>Your Trainer</Heading>
|
|
<Text style={highlightText}>{trainerName}</Text>
|
|
</Section>
|
|
<Text style={text}>
|
|
Your trainer will work with you to:
|
|
<br />
|
|
• Create personalized workout plans
|
|
<br />
|
|
• Provide nutrition guidance
|
|
<br />
|
|
• Track your progress and achievements
|
|
<br />• Adjust your program as you improve
|
|
</Text>
|
|
<Text style={text}>
|
|
Check your FitAI mobile app to view your trainer's profile and start
|
|
receiving personalized recommendations.
|
|
</Text>
|
|
<Text style={text}>
|
|
Let's crush those goals together!
|
|
<br />
|
|
The FitAI Team
|
|
</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
}
|
|
|
|
// Default export for email previews
|
|
export default TrainerAssignmentEmail;
|
|
|
|
// Styles
|
|
const main = {
|
|
backgroundColor: "#f6f9fc",
|
|
fontFamily:
|
|
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
|
|
};
|
|
|
|
const container = {
|
|
backgroundColor: "#ffffff",
|
|
margin: "0 auto",
|
|
padding: "20px 0 48px",
|
|
marginBottom: "64px",
|
|
maxWidth: "600px",
|
|
};
|
|
|
|
const h1 = {
|
|
color: "#333",
|
|
fontSize: "28px",
|
|
fontWeight: "bold",
|
|
margin: "40px 0 20px",
|
|
padding: "0 40px",
|
|
};
|
|
|
|
const h2 = {
|
|
color: "#333",
|
|
fontSize: "20px",
|
|
fontWeight: "bold",
|
|
margin: "10px 0",
|
|
padding: "0",
|
|
};
|
|
|
|
const text = {
|
|
color: "#333",
|
|
fontSize: "16px",
|
|
lineHeight: "26px",
|
|
padding: "0 40px",
|
|
margin: "16px 0",
|
|
};
|
|
|
|
const section = {
|
|
padding: "20px 40px",
|
|
backgroundColor: "#eff6ff",
|
|
margin: "20px 0",
|
|
borderLeft: "4px solid #3b82f6",
|
|
};
|
|
|
|
const highlightText = {
|
|
color: "#3b82f6",
|
|
fontSize: "24px",
|
|
fontWeight: "bold",
|
|
margin: "0",
|
|
padding: "0",
|
|
};
|