riccardo/newsletter-hackernews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: tweaked email templates

Browse Source
This commit is contained in:
Riccardo
2023-12-17 19:10:05 +01:00
parent 878e787ed0
commit a9b2c94cff
6 changed files with 148 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
components/emails/newsletter.tsx
View File

@@ -4,51 +4,85 @@ import { Section } from '@react-email/section';
import { Text } from '@react-email/text';
import { z } from 'zod';
import { NewsSchema } from '../../utils/schemas';
import { Footer } from './components/footer';
export default function NewsletterTemplate(
stories: z.infer<typeof NewsSchema>[]
) {
const sayings = [
'hot off the press',
'straight from the oven',
"straight from the horse's mouth",
'brand spanking new',
'fresh as a daisy',
'straight out of the box',
'straight off the assembly line',
'hot out of the kitchen',
'just minted',
'freshly brewed',
'just off the production line'
];
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 && (
<p>
<a href={story.url} style={{ textAlign: 'right' }}>
Read more
</a>
</p>
)}
</div>
);
})}
</Text>
</Container>
<div className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'>
<div className='text-center '>
<h1 className='my-4 text-3xl font-bold'>Good day!</h1>
<p>
Here is something{' '}
{sayings[Math.floor(Math.random() * sayings.length)]}:
</p>
</div>
<Container style={container}>
<Text>
{stories.map(story => {
return (
<div
key={story.id}
className='mt-8 rounded-lg border bg-card text-card-foreground shadow-sm'
data-v0-t='card'
>
<div className='flex flex-col space-y-1.5 p-6'>
<h2 className='text-2xl font-semibold'>
{story.title}
</h2>
<p>{story.by}</p>
</div>
{story.text && (
<div className='px-6'>
<p
className='mb-4'
dangerouslySetInnerHTML={{
__html:
story.text.length > 500
? story.text.substring(0, 500) + '...'
: story.text
}}
/>
</div>
)}
{story.url && (
<div className='p-4 text-right'>
<p>
<a
href={story.url}
className='inline-flex h-10 items-center justify-center rounded-md bg-blue-500 px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-blue-700/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'
>
Read more
</a>
</p>
</div>
)}
</div>
);
})}
</Text>
</Container>
<Footer />
</div>
</Section>
</Html>
)
@@ -64,9 +98,3 @@ const container = {
padding: '20px 0 48px',
width: '580px'
};
const paragraph = {
fontSize: '18px',
lineHeight: '1.4',
color: '#484848'
};