“kirukib” 7c74a5c398 feat: white preview bg and html export

Made-with: Cursor

2026-03-12 00:23:10 +03:00

5.7 KiB

Raw Blame History

Yaltopia Home – Email Template Studio

This project is a small React app used to preview transactional email templates that will be sent through Resend for Yaltopia Home.

All templates share a white + black theme with a strong card layout and a "Powered by Yaltopia Home" footer, similar to the design references you provided.

Tech stack

React + TypeScript (Vite)
Plain CSS for layout and email styling (no CSS framework)

Running locally

npm install
npm run dev

Then open the printed URL (usually http://localhost:5173) in your browser.

The left sidebar lets you switch between templates, and the preview panel shows how each email looks on desktop and mobile widths.

Email templates

All templates live in src/email/templates.tsx and are wired with sample data in src/email/sampleData.ts.

InvitationTeamMemberEmail – invitation for new team members to join a Yaltopia Home workspace.
PropertyRequestReceivedEmail – confirms a property search request has been received.
PropertyFoundRequestEmail – notifies when a matching property has been found.
BillPaymentReminderEmail – reminder for rent, water, security, and electric charges with either a payment link or bank details.
NewsletterEmail – simple newsletter layout with multiple article cards.
OwnerSuccessEmail – sent to owners after a successful sale or rental.
ListingApprovedEmail – confirms that a listing is approved and visible to the public.
AppointmentBookedEmail – confirms a viewing appointment and provides an "Add to calendar" link.
PasswordResetEmail – password reset flow with short-lived link copy.

All templates are wrapped with BaseEmailShell, which lives in src/email/BaseEmailShell.tsx and provides the shared header, frame, and footer.

Using with Resend

These templates are written as plain React components so they can be adapted to Resend in several ways:

Copy JSX directly into a dedicated Resend email project that uses React rendering (e.g. with @react-email/components or your own renderer).
Render to static HTML in a Node script (using react-dom/server) and paste that HTML into Resend's dashboard as a custom template.
The preview app now has an HTML tab which shows the full HTML (including <!DOCTYPE html>) for the currently selected template so you can copy it directly.
Use this app only for visual QA, while you keep the production copies of these components in your backend or email-service repo.

When integrating, replace the sample props in sampleData.ts with real data and ensure links (payment, calendar, reset, etc.) are generated by your backend.

Example: sending via Resend with React templates

import { Resend } from 'resend'
import { InvitationTeamMemberEmail } from './src/email/templates'

const resend = new Resend(process.env.RESEND_API_KEY)

await resend.emails.send({
  from: 'Yaltopia Home <no-reply@yaltopia.home>',
  to: 'user@example.com',
  subject: 'You have been invited to Yaltopia Home',
  react: (
    <InvitationTeamMemberEmail
      recipientName="Ricky Ricardo"
      teamName="Yaltopia Home Ops"
      role="Leasing Manager"
      inviteUrl="https://yaltopia.home/invite/abc123"
    />
  ),
})

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

5.7 KiB Raw Blame History Unescape Escape