import { PaymentTimeline } from "@/components/email/payment-timeline";
import { defaultTheme } from "@/components/email/theme-default";
export function PaymentTimelineDemo() {
return (
<PaymentTimeline
variant="3-steps"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/payment-timeline
Usage
import { PaymentTimeline } from "@/components/email/payment-timeline";<PaymentTimeline variant="3-steps" />Examples
Four steps
import { PaymentTimeline } from "@/components/email/payment-timeline";
export function PaymentTimelineFourStepsDemo() {
return <PaymentTimeline variant="4-steps" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
variant | "3-steps" | "4-steps" | "3-steps" | Configures the component's variant. |
amount | string | "$9.99" | Configures the component's amount. |
firstDate | string | "Paid: 17/11" | Configures the component's firstdate. |
secondDate | string | "17/12" | Configures the component's seconddate. |
thirdDate | string | "17/01" | Configures the component's thirddate. |
fourthDate | string | "17/02" | Configures the component's fourthdate. |