p 1 and 2 compeleted

2026-03-11 01:43:19 +01:00
1 parent 6adb541967
commit 3573709d99
@@ -0,0 +1,133 @@
+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",
+};