Campaign Card
An affiliate offer with its performance. EPC leads, not revenue — £40,000 and £4,000 cannot be ranked without knowing the traffic behind each, and earnings per click is the only comparable figure.
src/components/ui/campaign-card.tsxAbout
From the component's own source, where it was written.
An affiliate offer with its performance.
EPC — earnings per click — is the headline rather than total revenue, because it is the only figure comparable between offers. A campaign with £40,000 of revenue and one with £4,000 cannot be ranked without knowing the traffic behind each.
Conversion rate is computed from clicks and conversions rather than accepted as a prop, so it cannot disagree with the two numbers printed beside it.
Install
npx astralyx-ui add campaign-card
Usage
import { CampaignCard } from '@/components/ui/campaign-card'
<CampaignCard name="Summer sale" status="active" clicks={18402} conversions={412} revenue={38210} />Composer
Change the props and the source below follows.
Summer sale — pricing page
Northwind Retail
Terms 30% rev share
- Clicks
- 18,402
- Conversions
- 4122.2%
- Revenue
- US$38,210
- EPC
- US$2.08
<CampaignCard
name="Summer sale"
status="active"
clicks={18402}
conversions={412}
revenue={38210}
payout="30% rev share"
/>API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
CampaignCard
An affiliate offer with its performance.
Extends Omit<ComponentProps<'article'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| name | ReactNode | required | — |
| advertiser | ReactNode | — | — |
| status | CampaignStatus | required | 'active' | 'paused' | 'ended' | 'pending'. Anything not active is dimmed, so a paused offer does not read as a live one. |
| clicks | number | 0 | The three raw figures. Conversion rate and EPC are derived from them here, so the card can never print a rate that contradicts its own numbers. |
| conversions | number | 0 | The three raw figures. Conversion rate and EPC are derived from them here, so the card can never print a rate that contradicts its own numbers. |
| revenue | number | 0 | The three raw figures. Conversion rate and EPC are derived from them here, so the card can never print a rate that contradicts its own numbers. |
| payout | ReactNode | — | The commission terms in words — "30% rev share", "$25 CPA". Not a number, because these are rarely just a number. |
| currency | string | 'USD' | — |
| locale | string | 'en-GB' | — |
| history | number[] | — | Optional sparkline. A campaign at £1,700 a day that was at £800 last week is a different proposition from one that was at £3,000. |
| tags | ReactNode | — | — |
| href | string | — | — |
| termsLabel | ReactNode | 'Terms' | Precedes the commission terms. |
| clicksLabel | ReactNode | 'Clicks' | — |
| conversionsLabel | ReactNode | 'Conversions' | — |
| revenueLabel | ReactNode | 'Revenue' | — |
| epcLabel | ReactNode | 'EPC' | Earnings per click — the comparable figure. |
Types
| Type | Definition | Description |
|---|---|---|
CampaignStatus | 'active' | 'paused' | 'ended' | 'pending' | — |