import { baseUrl } from '@/lib/constants';
import {
Body,
Container,
Font,
Head,
Heading,
Hr,
Html,
Img,
Link,
Preview,
Section,
Tailwind,
Text,
} from '@react-email/components';
interface NewsletterWelcomeEmailProps {
firstName: string;
posts: {
title: string;
description?: string;
date: Date;
tags?: string[];
image?: string;
author: string;
url: string;
}[];
}
function PostCard({
title,
description,
date,
tags,
image,
author,
url,
}: NewsletterWelcomeEmailProps['posts'][0]) {
return (
{title}
{description ||
'Click on the blog post to learn more about this topic.'}
);
}
export default function NewsletterWelcomeEmail({
firstName,
posts,
}: NewsletterWelcomeEmailProps) {
return (
Thanks for joining my newsletter! This email is to welcome you.
Blog
Welcome!
Hey {firstName},
Thanks for subscribing to my newsletter! I'm excited to
share my thoughts and ideas with you. You can expect an email
every few weeks, and I might occasionally share newsletter-only
content as well—so stay tuned!
Here are a few popular posts from the past few months that you
might find interesting:
{posts.length > 0 ? (
posts.map((post) => )
) : (
Stay tuned for upcoming content!
)}
Thank you for being a part of my community! I appreciate your
support and look forward to connecting with you.
John Doe
);
}
NewsletterWelcomeEmail.PreviewProps = {
firstName: 'Jane',
posts: [
{
title: 'Next.js Pages',
description:
'Dive into the details of Next.js Pages with examples, dynamic routing, pre-rendering strategies like Static Generation and SSR, and pro tips for building fast, SEO-friendly web apps. Packed with insights and tricks from my latest project!',
date: new Date('2025-03-21'),
tags: ['Next.js', 'Pages', 'Routing'],
image: `${baseUrl}/images/blog/pages.png`,
author: 'You',
url: `${baseUrl}/posts/pages`,
},
{
title: 'Markdown Examples',
description:
'Learn to use Markdown for clean, structured formatting in blogs, docs, and notes. Explore examples, pro tips, and practical use cases to level up your writing and make your content easier to read, share, and maintain across platforms.',
date: new Date('2025-03-22'),
tags: ['Markdown', 'Docs', 'Writing'],
image: `${baseUrl}/images/blog/markdown-examples.png`,
author: 'You',
url: `${baseUrl}/posts/markdown-examples`,
},
{
title: 'Using MDX',
description:
'Learn MDX in Next.js to mix Markdown with React. This guide shows setup with @next/mdx, usage tips, and examples to embed JSX in posts—ideal for blogs, docs, and interactive tutorials.',
date: new Date('2025-03-23'),
tags: ['MDX', 'Next.js', 'React'],
image: `${baseUrl}/images/blog/using-mdx.png`,
author: 'You',
url: `${baseUrl}/posts/using-mdx`,
},
],
} satisfies NewsletterWelcomeEmailProps;