diff --git a/components/emails/components/footer.tsx b/components/emails/components/footer.tsx new file mode 100644 index 0000000..9d46f27 --- /dev/null +++ b/components/emails/components/footer.tsx @@ -0,0 +1,14 @@ +export function Footer() { + return ( + + ); +} diff --git a/components/emails/components/note.tsx b/components/emails/components/note.tsx new file mode 100644 index 0000000..e9a3b19 --- /dev/null +++ b/components/emails/components/note.tsx @@ -0,0 +1,11 @@ +type NoteProps = { + children: React.ReactNode; +}; + +export function Note({ children }: NoteProps) { + return ( +
+
{children}
+
+ ); +} diff --git a/components/emails/confirmation.tsx b/components/emails/confirmation.tsx index 85a57ba..803d670 100644 --- a/components/emails/confirmation.tsx +++ b/components/emails/confirmation.tsx @@ -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) { - Thank you for subscribing. Please confirm your email address by - clicking{' '} - - here - - . - +
+

+ Dear subscriber, +

+

+ thank you for subscribing to our newsletter! Please click the + button below to confirm your subscription. +

+
+ +
+ + If you didn't subscribe to our newsletter, please ignore this + email. + +
} /> ) diff --git a/components/emails/newsletter.tsx b/components/emails/newsletter.tsx index 29e82dc..2d924e0 100644 --- a/components/emails/newsletter.tsx +++ b/components/emails/newsletter.tsx @@ -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[] ) { + 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: (
- - - {stories.map(story => { - return ( -
-

{story.title}

-

{story.by}

- {story.text && ( -

500 - ? story.text.substring(0, 500) + '...' - : story.text - }} - /> - )} - {story.url && ( -

- - Read more - -

- )} -
- ); - })} - - +
+
+

Good day!

+

+ Here is something{' '} + {sayings[Math.floor(Math.random() * sayings.length)]}: +

+
+ + + {stories.map(story => { + return ( +
+
+

+ {story.title} +

+

{story.by}

+
+ {story.text && ( +
+

500 + ? story.text.substring(0, 500) + '...' + : story.text + }} + /> +

+ )} + {story.url && ( + + )} +
+ ); + })} + + +
+
) @@ -64,9 +98,3 @@ const container = { padding: '20px 0 48px', width: '580px' }; - -const paragraph = { - fontSize: '18px', - lineHeight: '1.4', - color: '#484848' -}; diff --git a/components/emails/template.tsx b/components/emails/template.tsx index 8022fda..f9d5290 100644 --- a/components/emails/template.tsx +++ b/components/emails/template.tsx @@ -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 ( -
+
- {title} +

{title}

{body} +
); } 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' }; diff --git a/components/emails/unsubscribe.tsx b/components/emails/unsubscribe.tsx index 96b851b..cc5c7c4 100644 --- a/components/emails/unsubscribe.tsx +++ b/components/emails/unsubscribe.tsx @@ -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: ( You have unsubscribed from the newsletter.} + body={ +
+

+ You have been successfully unsubscribed from our newsletter. You + won't receive any further communications from us unless you + explicitly opt-in again. +

+
+ +
+ + If you have any questions or concerns, please feel free to{' '} + + contact us + + . + +
+ } /> - ), + ) }; }