style: tweaked email templates
This commit is contained in:
Riccardo
14
components/emails/components/footer.tsx
Normal file
14
components/emails/components/footer.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className='mt-8 border-t border-gray-200 pt-6'>
|
||||
<div className='mb-4 ml-8 flex items-center justify-between'>
|
||||
<div>
|
||||
<h4 className='text-lg font-semibold text-gray-700'>Contact Us</h4>
|
||||
<p className='text-gray-600'>FromPixels</p>
|
||||
<p className='text-gray-600'>Email: info@frompixels.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className='text-sm text-gray-500'></p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
11
components/emails/components/note.tsx
Normal file
11
components/emails/components/note.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
type NoteProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function Note({ children }: NoteProps) {
|
||||
return (
|
||||
<div className='mt-8 bg-gray-100 px-6 py-4 dark:bg-gray-800'>
|
||||
<div className='text-sm text-gray-600 dark:text-gray-400'>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import { Link } from '../custom/link';
|
||||
import { Note } from './components/note';
|
||||
import Email from './template';
|
||||
|
||||
export default function ConfirmationTemplate(code: string) {
|
||||
@@ -7,14 +9,25 @@ export default function ConfirmationTemplate(code: string) {
|
||||
<Email
|
||||
title={'Welcome!'}
|
||||
body={
|
||||
<>
|
||||
Thank you for subscribing. Please confirm your email address by
|
||||
clicking{' '}
|
||||
<a href={`${process.env.HOME_URL}/confirmation?code=${code}`}>
|
||||
here
|
||||
</a>
|
||||
.
|
||||
</>
|
||||
<div className='mt-8'>
|
||||
<p className='text-base text-gray-700 dark:text-gray-400'>
|
||||
Dear subscriber,
|
||||
</p>
|
||||
<p className='mt-2 text-base text-gray-700 dark:text-gray-400'>
|
||||
thank you for subscribing to our newsletter! Please click the
|
||||
button below to confirm your subscription.
|
||||
</p>
|
||||
<div className='mt-8 flex justify-center'>
|
||||
<Link
|
||||
path={`${process.env.HOME_URL}/confirmation?code=${code}`}
|
||||
text='Confirm Subscription'
|
||||
/>
|
||||
</div>
|
||||
<Note>
|
||||
If you didn't subscribe to our newsletter, please ignore this
|
||||
email.
|
||||
</Note>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -4,31 +4,57 @@ 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}>
|
||||
<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 style={paragraph}>
|
||||
<Text>
|
||||
{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)'
|
||||
}}
|
||||
className='mt-8 rounded-lg border bg-card text-card-foreground shadow-sm'
|
||||
data-v0-t='card'
|
||||
>
|
||||
<h1>{story.title}</h1>
|
||||
<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
|
||||
@@ -36,19 +62,27 @@ export default function NewsletterTemplate(
|
||||
: story.text
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{story.url && (
|
||||
<div className='p-4 text-right'>
|
||||
<p>
|
||||
<a href={story.url} style={{ textAlign: 'right' }}>
|
||||
<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'
|
||||
};
|
||||
|
||||
@@ -2,6 +2,7 @@ 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 { Footer } from './components/footer';
|
||||
|
||||
type EmailProps = {
|
||||
title: string;
|
||||
@@ -11,33 +12,31 @@ type EmailProps = {
|
||||
export default function Email({ title, body }: EmailProps) {
|
||||
return (
|
||||
<Html>
|
||||
<Section style={main}>
|
||||
<Section
|
||||
className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'
|
||||
style={main}
|
||||
>
|
||||
<Container style={container}>
|
||||
<Text style={heading}>{title}</Text>
|
||||
<h1 className='mt-4 text-center text-3xl font-bold'>{title}</h1>
|
||||
<Text style={paragraph}>{body}</Text>
|
||||
</Container>
|
||||
<Footer />
|
||||
</Section>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
|
||||
const main = {
|
||||
backgroundColor: '#ffffff',
|
||||
backgroundColor: '#ffffff'
|
||||
};
|
||||
|
||||
const container = {
|
||||
margin: '0 auto',
|
||||
padding: '20px 0 48px',
|
||||
width: '580px',
|
||||
};
|
||||
|
||||
const heading = {
|
||||
fontSize: '24px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px',
|
||||
width: '580px'
|
||||
};
|
||||
|
||||
const paragraph = {
|
||||
fontSize: '16px',
|
||||
marginBottom: '16px',
|
||||
marginBottom: '16px'
|
||||
};
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { Link } from '../custom/link';
|
||||
import { Note } from './components/note';
|
||||
import Email from './template';
|
||||
|
||||
export default function UnsubscribeTemplate() {
|
||||
@@ -6,8 +8,26 @@ export default function UnsubscribeTemplate() {
|
||||
template: (
|
||||
<Email
|
||||
title="We're sad you're leaving :("
|
||||
body={<>You have unsubscribed from the newsletter.</>}
|
||||
body={
|
||||
<div className='mt-8'>
|
||||
<p className='mt-2 text-base text-gray-700 dark:text-gray-400'>
|
||||
You have been successfully unsubscribed from our newsletter. You
|
||||
won't receive any further communications from us unless you
|
||||
explicitly opt-in again.
|
||||
</p>
|
||||
<div className='my-8 flex justify-center'>
|
||||
<Link path='/' text='Re-subscribe' />
|
||||
</div>
|
||||
<Note>
|
||||
If you have any questions or concerns, please feel free to{' '}
|
||||
<a className='text-blue-500 underline' href='#'>
|
||||
contact us
|
||||
</a>
|
||||
.
|
||||
</Note>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
),
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user