import * as React from 'npm:react@18.3.1' import { Body, Container, Head, Heading, Html, Preview, Text, Button } from 'npm:@react-email/components@0.0.22' import type { TemplateEntry } from './registry.ts' const SITE_NAME = 'Avria Community Management' interface Props { memberName?: string voteTitle?: string voteDescription?: string associationName?: string link?: string } const BoardVoteInviteEmail = ({ memberName, voteTitle, voteDescription, associationName, link }: Props) => ( Board vote — {voteTitle || 'Cast your vote'} Board Vote: {voteTitle || 'New vote'} Hello {memberName || 'Board Member'}, A board vote has been opened{associationName ? ` for ${associationName}` : ''}: {voteDescription && {voteDescription}} Please cast your vote using the secure link below. 🔒 This is a secure link tied uniquely to your board seat. Please do not share or forward it. For recording purposes only: This electronic vote will be formally ratified at a later board meeting. If you did not expect this email, please contact your association manager. — {SITE_NAME} ) export const template = { component: BoardVoteInviteEmail, subject: (d: Record) => `Board Vote — ${d.voteTitle || 'New vote'}${d.associationName ? ` (${d.associationName})` : ''}`, displayName: 'Board vote invite', previewData: { memberName: 'John Director', voteTitle: 'Approve 2026 Budget', voteDescription: 'Approve the proposed 2026 operating budget as presented.', associationName: 'Sample HOA', link: 'https://avria.cloud/board-vote/xxx?token=yyy' }, } satisfies TemplateEntry const main = { backgroundColor: '#ffffff', fontFamily: 'Inter, Arial, sans-serif' } const container = { maxWidth: '600px', margin: '0 auto', padding: '28px 24px' } const h1 = { color: '#111827', fontSize: '22px', lineHeight: '30px', margin: '0 0 14px', fontWeight: '700' } const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 12px' } const descBox = { background: '#f6f7f9', border: '1px solid #e5e7eb', borderRadius: '6px', padding: '12px 14px', color: '#374151', fontSize: '14px', whiteSpace: 'pre-wrap' as const, margin: '0 0 16px' } const smallText = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '0 0 10px' } const button = { backgroundColor: '#2941a4', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px', margin: '12px 0 18px' } const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }