134 lines
2.8 KiB
TypeScript
134 lines
2.8 KiB
TypeScript
import {
|
|
Body,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
Button,
|
|
Link,
|
|
} from "@react-email/components";
|
|
|
|
interface UserInvitationEmailProps {
|
|
email: string;
|
|
role: string;
|
|
inviteUrl: string;
|
|
}
|
|
|
|
export function UserInvitationEmail({
|
|
email,
|
|
role,
|
|
inviteUrl,
|
|
}: UserInvitationEmailProps) {
|
|
const roleDisplay =
|
|
role === "admin"
|
|
? "Administrator"
|
|
: role === "trainer"
|
|
? "Trainer"
|
|
: "Client";
|
|
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>You've been invited to join FitAI as a {roleDisplay}</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
<Heading style={h1}>Welcome to FitAI! 🎉</Heading>
|
|
<Text style={text}>
|
|
You've been invited to join FitAI as a{" "}
|
|
<strong>{roleDisplay}</strong>.
|
|
</Text>
|
|
<Text style={text}>
|
|
Click the button below to accept your invitation and create your
|
|
account:
|
|
</Text>
|
|
<Section style={buttonContainer}>
|
|
<Button style={button} href={inviteUrl}>
|
|
Accept Invitation
|
|
</Button>
|
|
</Section>
|
|
<Text style={text}>
|
|
Or copy and paste this URL into your browser:
|
|
</Text>
|
|
<Text style={link}>
|
|
<Link href={inviteUrl}>{inviteUrl}</Link>
|
|
</Text>
|
|
<Text style={text}>
|
|
This invitation was sent to {email}. If you didn't expect this
|
|
email, you can safely ignore it.
|
|
</Text>
|
|
<Text style={footer}>The FitAI Team</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
}
|
|
|
|
// Default export for email previews
|
|
export default UserInvitationEmail;
|
|
|
|
// 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 text = {
|
|
color: "#333",
|
|
fontSize: "16px",
|
|
lineHeight: "26px",
|
|
padding: "0 40px",
|
|
margin: "16px 0",
|
|
};
|
|
|
|
const buttonContainer = {
|
|
padding: "27px 40px",
|
|
textAlign: "center" as const,
|
|
};
|
|
|
|
const button = {
|
|
backgroundColor: "#3b82f6",
|
|
borderRadius: "5px",
|
|
color: "#fff",
|
|
fontSize: "16px",
|
|
fontWeight: "bold",
|
|
textDecoration: "none",
|
|
textAlign: "center" as const,
|
|
display: "inline-block",
|
|
padding: "12px 32px",
|
|
};
|
|
|
|
const link = {
|
|
color: "#3b82f6",
|
|
fontSize: "14px",
|
|
padding: "0 40px",
|
|
wordBreak: "break-all" as const,
|
|
};
|
|
|
|
const footer = {
|
|
color: "#333",
|
|
fontSize: "16px",
|
|
lineHeight: "26px",
|
|
padding: "0 40px",
|
|
marginTop: "32px",
|
|
};
|