diff --git a/src/lib/email-templates/task-reminder.tsx b/src/lib/email-templates/task-reminder.tsx new file mode 100644 index 0000000..ea803c2 --- /dev/null +++ b/src/lib/email-templates/task-reminder.tsx @@ -0,0 +1,70 @@ +import React from 'react' +import { + Body, Container, Head, Heading, Html, Preview, Section, Text, +} from '@react-email/components' +import type { TemplateEntry } from './registry' + +const SITE_NAME = 'StageLaw' + +interface TaskReminderProps { + taskTitle?: string + caseTitle?: string | null + dueDate?: string | null + note?: string | null +} + +const TaskReminderEmail = ({ taskTitle, caseTitle, dueDate, note }: TaskReminderProps) => ( + + + Reminder: {taskTitle || 'Task reminder'} + + + Task reminder + + This is a reminder for the following task: + +
+ {taskTitle || 'Untitled task'} + {caseTitle && ( + Case: {caseTitle} + )} + {dueDate && ( + Due: {dueDate} + )} +
+ {note && ( +
+ Note + {note} +
+ )} + — {SITE_NAME} + + + +) + +export const template = { + component: TaskReminderEmail, + subject: (data: Record) => + `Reminder: ${data?.taskTitle || 'Task'}`, + displayName: 'Task reminder', + previewData: { + taskTitle: 'Review settlement agreement', + caseTitle: 'CASE-2025-0042 — Smith v. HOA', + dueDate: 'Apr 25, 2026', + note: 'Make sure to confirm signatures with opposing counsel before sending.', + }, +} satisfies TemplateEntry + +const main = { backgroundColor: '#ffffff', fontFamily: 'Arial, sans-serif' } +const container = { padding: '24px 28px', maxWidth: '560px' } +const h1 = { fontSize: '22px', fontWeight: 'bold', color: '#0f172a', margin: '0 0 16px' } +const text = { fontSize: '14px', color: '#334155', lineHeight: '1.5', margin: '0 0 16px' } +const card = { backgroundColor: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: '8px', padding: '16px 18px', margin: '0 0 16px' } +const taskTitleStyle = { fontSize: '16px', fontWeight: 'bold', color: '#0f172a', margin: '0 0 8px' } +const metaText = { fontSize: '13px', color: '#64748b', margin: '2px 0' } +const noteCard = { backgroundColor: '#fef3c7', border: '1px solid #fde68a', borderRadius: '8px', padding: '12px 16px', margin: '0 0 16px' } +const noteLabel = { fontSize: '11px', fontWeight: 'bold', color: '#92400e', textTransform: 'uppercase' as const, letterSpacing: '0.05em', margin: '0 0 4px' } +const noteText = { fontSize: '13px', color: '#78350f', margin: '0', whiteSpace: 'pre-wrap' as const } +const footer = { fontSize: '12px', color: '#94a3b8', margin: '24px 0 0' }