This is very mutch psuedo code designed to illustrate the goal. It would not work :)
Created
February 3, 2022 08:27
-
-
Save sodiray/a033909e3f483a4eb094618595b5406b to your computer and use it in GitHub Desktop.
Mailwind + React => Dynamic Tailwind Emails
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export default function PasswordResetEmail({ | |
| link, | |
| user | |
| }: { | |
| link: string | |
| user: User | |
| }) { | |
| return ( | |
| <div className="bg-slate-200"> | |
| <h1>Reset Password</h1> | |
| <p>Hey {user.name}, click the link below to reset your password.</p> | |
| <a href={link}>{link}</a> | |
| </div> | |
| ) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { render } from 'react-mailwind' | |
| // Serverless function api endpoint that gets called | |
| // when a user requests a forgot password email. Lots | |
| // of real logic omitted for simplicity. | |
| // | |
| // POST /forgot-password | |
| export default function handle() { | |
| const html = render(<PasswordResetEmail user={user} link={link} />) | |
| postmark.send({ | |
| to: user.email, | |
| content: html | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment