Invoice due

npx shadcn@latest add https://email-sdk.dev/r/invoice-due.json

import {
  EmailButton,
  EmailCard,
  EmailHeading,
  EmailSeparator,
  EmailText,
  ShadcnEmail,
} from "@opencoredev/email-sdk/react";

export function InvoiceDueEmail({ amount, dueDate, invoiceUrl }: {
  amount: string;
  dueDate: string;
  invoiceUrl: string;
}) {
  return (
    <ShadcnEmail preview={`Your invoice is due ${dueDate}`}>
      <EmailCard>
        <EmailHeading>Invoice due {dueDate}</EmailHeading>
        <EmailText>
          Your invoice is ready and will be charged to your saved payment method.
        </EmailText>
        <EmailSeparator />
        <EmailText muted>Amount due</EmailText>
        <EmailText style={{ fontSize: 24, fontWeight: 700 }}>{amount}</EmailText>
        <EmailText muted>Due date: {dueDate}</EmailText>
        <EmailButton href={invoiceUrl}>View invoice</EmailButton>
      </EmailCard>
    </ShadcnEmail>
  );
}