67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import { Container } from '@react-email/container';
|
|
import { Html } from '@react-email/html';
|
|
import { Section } from '@react-email/section';
|
|
import { Text } from '@react-email/text';
|
|
import { z } from 'zod';
|
|
import { NewsSchema } from '../../utils/types';
|
|
|
|
export default function NewsletterTemplate(
|
|
stories: z.infer<typeof NewsSchema>[]
|
|
) {
|
|
return {
|
|
subject: `What's new from Hackernews?`,
|
|
template: (
|
|
<Html>
|
|
<Section style={main}>
|
|
<Container style={container}>
|
|
<Text style={paragraph}>
|
|
{stories.map(story => {
|
|
return (
|
|
<div
|
|
key={story.id}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #ccc',
|
|
boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.1)'
|
|
}}
|
|
>
|
|
<h1>{story.title}</h1>
|
|
<p>{story.by}</p>
|
|
{story.text && (
|
|
<p
|
|
dangerouslySetInnerHTML={{
|
|
__html:
|
|
story.text.length > 500
|
|
? story.text.substring(0, 500) + '...'
|
|
: story.text
|
|
}}
|
|
/>
|
|
)}
|
|
{story.url && <a href={story.url}>Read more</a>}
|
|
</div>
|
|
);
|
|
})}
|
|
</Text>
|
|
</Container>
|
|
</Section>
|
|
</Html>
|
|
)
|
|
};
|
|
}
|
|
|
|
const main = {
|
|
backgroundColor: '#ffffff'
|
|
};
|
|
|
|
const container = {
|
|
margin: '0 auto',
|
|
padding: '20px 0 48px',
|
|
width: '580px'
|
|
};
|
|
|
|
const paragraph = {
|
|
fontSize: '18px',
|
|
lineHeight: '1.4',
|
|
color: '#484848'
|
|
};
|