From 5b7ccf0b671e2999b62befc729a3e517a0433728 Mon Sep 17 00:00:00 2001 From: Bertrand Yuan Date: Mon, 15 Dec 2025 23:48:10 +0800 Subject: initial commit -- the front-end prototype The initial code is base on Anirudh's work. More to see at: https://github.com/techwithanirudh/shadcn-blog Therefore, the code in this commit is under MIT license. --- emails/newsletter-welcome.tsx | 187 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 emails/newsletter-welcome.tsx (limited to 'emails/newsletter-welcome.tsx') diff --git a/emails/newsletter-welcome.tsx b/emails/newsletter-welcome.tsx new file mode 100644 index 0000000..10bdf3e --- /dev/null +++ b/emails/newsletter-welcome.tsx @@ -0,0 +1,187 @@ +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 ( +
+ + Post image + +
+ + {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; -- cgit v1.2.3