Files
CubeAdmin/lib/email/templates/invitation.tsx
2026-03-08 15:49:34 +01:00

79 lines
2.3 KiB
TypeScript

import {
Body,
Button,
Container,
Head,
Heading,
Html,
Preview,
Section,
Text,
Tailwind,
} from "@react-email/components";
import * as React from "react";
interface InvitationEmailProps {
invitedByName: string;
inviteUrl: string;
role: string;
}
export function InvitationEmail({
invitedByName,
inviteUrl,
role,
}: InvitationEmailProps) {
return (
<Html>
<Head />
<Preview>
{invitedByName} invited you to manage a Minecraft server on CubeAdmin
</Preview>
<Tailwind>
<Body className="bg-zinc-950 font-sans">
<Container className="mx-auto max-w-lg py-12 px-6">
{/* Logo */}
<Section className="mb-8 text-center">
<Heading className="text-2xl font-bold text-emerald-500 m-0">
CubeAdmin
</Heading>
</Section>
{/* Card */}
<Section className="bg-zinc-900 rounded-xl border border-zinc-800 p-8">
<Heading className="text-xl font-semibold text-white mt-0 mb-2">
You&apos;ve been invited
</Heading>
<Text className="text-zinc-400 mt-0 mb-6">
<strong className="text-white">{invitedByName}</strong> has
invited you to join CubeAdmin as a{" "}
<strong className="text-emerald-400">{role}</strong>. Click the
button below to create your account and start managing the
Minecraft server.
</Text>
<Button
href={inviteUrl}
className="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold rounded-lg px-6 py-3 text-sm no-underline inline-block"
>
Accept Invitation
</Button>
<Text className="text-zinc-500 text-xs mt-6 mb-0">
This invitation link expires in 48 hours. If you didn&apos;t
expect this email, you can safely ignore it.
</Text>
</Section>
<Text className="text-zinc-600 text-xs text-center mt-6">
CubeAdmin Minecraft Server Management
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
}
export default InvitationEmail;