import * as React from 'npm:react@18.3.1' import { Body, Button, Container, Head, Heading, Html, Preview, Section, Text } from 'npm:@react-email/components@0.0.22' import type { TemplateEntry } from './registry.ts' interface SignupCodeInviteProps { recipientName?: string associationName?: string code?: string link?: string roleLabel?: string expiresAt?: string } const SITE_NAME = 'Avria Community Management' const SignupCodeInviteEmail = ({ recipientName, associationName, code, link, roleLabel, expiresAt }: SignupCodeInviteProps) => ( Your registration code for {associationName || SITE_NAME}
You're invited to register Hello {recipientName || 'there'}, {associationName ? `${associationName}` : SITE_NAME} has set up an account for you {roleLabel ? ` as a ${roleLabel}` : ''}. Click the button below to complete your registration — your email will be verified automatically. {link && } {code && ( Or enter this code manually: {code} )} {expiresAt && This invitation expires on {expiresAt}.} If you weren't expecting this email, you can safely ignore it. ) export const template = { component: SignupCodeInviteEmail, subject: (data: Record) => `Your registration code for ${data.associationName || SITE_NAME}`, displayName: 'Sign-up code invitation', previewData: { recipientName: 'Jane Smith', associationName: 'Sample HOA', code: 'ABC123XYZ9', link: 'https://avria.cloud/register/ABC123XYZ9', roleLabel: 'Homeowner', expiresAt: 'June 1, 2026', }, } satisfies TemplateEntry const main = { backgroundColor: '#ffffff', fontFamily: 'Inter, Arial, sans-serif' } const container = { maxWidth: '600px', margin: '0 auto', padding: '28px 24px' } const brandBar = { height: '5px', backgroundColor: '#2563eb', borderRadius: '6px', marginBottom: '24px' } const h1 = { color: '#111827', fontSize: '24px', lineHeight: '32px', margin: '0 0 14px', fontWeight: '700' } const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 18px' } const meta = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '14px 0 0' } const button = { backgroundColor: '#2563eb', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px' } const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }