Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-23 21:31:51 +00:00
parent 5322453341
commit a3df1396a5
1 changed files with 70 additions and 0 deletions
@@ -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) => (
+  <Html lang="en" dir="ltr">
+    <Head />
+    <Preview>Reminder: {taskTitle || 'Task reminder'}</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Heading style={h1}>Task reminder</Heading>
+        <Text style={text}>
+          This is a reminder for the following task:
+        </Text>
+        <Section style={card}>
+          <Text style={taskTitleStyle}>{taskTitle || 'Untitled task'}</Text>
+          {caseTitle && (
+            <Text style={metaText}>Case: {caseTitle}</Text>
+          )}
+          {dueDate && (
+            <Text style={metaText}>Due: {dueDate}</Text>
+          )}
+        </Section>
+        {note && (
+          <Section style={noteCard}>
+            <Text style={noteLabel}>Note</Text>
+            <Text style={noteText}>{note}</Text>
+          </Section>
+        )}
+        <Text style={footer}>— {SITE_NAME}</Text>
+      </Container>
+    </Body>
+  </Html>
+)
+
+export const template = {
+  component: TaskReminderEmail,
+  subject: (data: Record<string, any>) =>
+    `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' }