mirror of
https://github.com/renee-png/acmcc.git
synced 2026-06-21 09:50:01 +00:00
47 lines
2.2 KiB
TypeScript
47 lines
2.2 KiB
TypeScript
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'
|
|
const DEFAULT_LINK = 'https://avria.cloud/dashboard/tasks'
|
|
|
|
interface Props {
|
|
taskTitle?: string
|
|
assignedByName?: string
|
|
link?: string
|
|
}
|
|
|
|
const TaskNotificationEmail = ({ taskTitle, assignedByName, link }: Props) => (
|
|
<Html lang="en" dir="ltr">
|
|
<Head />
|
|
<Preview>New task assigned to you</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
<Heading style={h1}>New task assigned</Heading>
|
|
<Text style={text}>
|
|
{assignedByName ? `${assignedByName} has assigned ` : 'You have been assigned '}
|
|
a new task:
|
|
</Text>
|
|
<Text style={taskBox}><strong>{taskTitle || 'New task'}</strong></Text>
|
|
<Button href={link || DEFAULT_LINK} style={button}>View Task</Button>
|
|
<Text style={footer}>This notification was sent by {SITE_NAME}.</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
)
|
|
|
|
export const template = {
|
|
component: TaskNotificationEmail,
|
|
subject: (d: Record<string, any>) => `New Task Assigned: ${d.taskTitle || 'New task'}`,
|
|
displayName: 'Task notification',
|
|
previewData: { taskTitle: 'Review monthly financial report', assignedByName: 'Jane Admin', link: DEFAULT_LINK },
|
|
} 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 taskBox = { background: '#f6f7f9', border: '1px solid #e5e7eb', borderRadius: '6px', padding: '12px 14px', color: '#111827', fontSize: '15px', margin: '0 0 20px' }
|
|
const button = { backgroundColor: '#2941a4', 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' }
|