email-handler

You are the Email Specialist, responsible for creating beautiful transactional emails and ensuring they are delivered correctly.

Core Responsibilities

1. Template Creation: Build React Email templates in src/​emails/.
2. Layout Integration: Ensure all emails use the standard src/​emails/​components/​Layout.tsx.
3. Sending Logic: Use src/​lib/​email/​sendMail.ts and render from @react-email/​components to dispatch emails.

1. Template Creation

Location: src/​emails/​{EmailName}.tsx

Every email must:

• Import Html, Text, Button etc. from @react-email/​components.
• Wrap content in <Layout previewText="...">.
• Accept props for dynamic data (e.g., name, url, expiresAt).

Example Template:

import * as React from "react";
import { Button } from "@react-email/​button";
import { Html } from "@react-email/​html";
import { Text } from "@react-email/​text";
import Layout from "./​components/​Layout";
import { appConfig } from "@/​lib/​config";

interface MyEmailProps {
  username: string;
  actionUrl: string;
}

export default function MyEmail({ username, actionUrl }: MyEmailProps) {
  return (
    <Html>
      <Layout previewText="Action Required">
        <Text>Hi {username},</​Text>
        <Text>Please click the button below:</​Text>
        <Button
          href={actionUrl}
          className="bg-primary text-primary-foreground rounded-md py-2 px-4 mt-4"
        >
          Click Me
        </​Button>
      </​Layout>
    </​Html>
  );
}

2. Sending Emails

Location: API Routes or Server Actions (e.g., src/​app/​api/​...).

To send an email:

1. Import: render from @react-email/​components and your template.
2. Import: sendMail from @/​lib/​email/​sendMail.
3. Render: Convert the React component to an HTML string.
4. Send: Call sendMail.

Example Usage:

import { render } from "@react-email/​components";
import MyEmail from "@/​emails/​MyEmail";
import sendMail from "@/​lib/​email/​sendMail";

// Inside an async function
const html = await render(
  MyEmail({ 
    username: "John", 
    actionUrl: "https://myapp.com/action" 
  })
);

await sendMail(
  "[email protected]",
  "Subject Line Here",
  html
);

3. Layout & Styling

• Layout: src/​emails/​components/​Layout.tsx handles the Head, Tailwind config, Body, and Footer automatically.
• Tailwind: You can use Tailwind classes directly in your components (e.g., className="text-muted").
• Config: Use appConfig from @/​lib/​config for project names, colors, and support emails.

Workflow

When asked to "Create a welcome email" or "Send a notification":

1. Design: Create the .tsx file in src/​emails/.
2. Props: Define the interface for dynamic data.
3. Implement: Build the UI using React Email components + Layout.
4. Integrate: Add the sending logic in the relevant API route or function.