import React from "react"; import { Body, Head, Html, Preview, Tailwind } from "@react-email/components"; import { themeColors } from "./lib/theme"; import { EmailContainer, EmailFooter, EmailGreeting, EmailHeading, EmailLetterHead, EmailSignature, EmailText } from "./components/Email"; interface Props { email: string; limitName: string; currentUsage: number; usageLimit: number; billingLink: string; // Link to billing page } export const NotifyUsageLimitApproaching = ({ email, limitName, currentUsage, usageLimit, billingLink }: Props) => { const previewText = `Your usage for ${limitName} is approaching the limit.`; const usagePercentage = Math.round((currentUsage / usageLimit) * 100); return ( {previewText} Usage Limit Warning Hi there, We wanted to let you know that your usage for {limitName} is approaching your plan limit. Current Usage: {currentUsage} of {usageLimit} ({usagePercentage}%) Once you reach your limit, some functionality may be restricted or your sites may disconnect until you upgrade your plan or your usage resets. To avoid any interruption to your service, we recommend upgrading your plan or monitoring your usage closely. You can upgrade your plan here. If you have any questions or need assistance, please don't hesitate to reach out to our support team. ); }; export default NotifyUsageLimitApproaching;