{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "influencer-campaign-card", "title": "Influencer Campaign Card", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/influencer-campaign-card/influencer-campaign-card.component.ts", "content": "// Creator partnership management card with verified creator hero profile, multi-channel\n// reach demographics, 4-column campaign telemetry HUD, contract deliverables checklist with\n// live asset telemetry, and affiliate promo code ROI tracker. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal } from '@angular/core'\nimport {\n BadgeCheck,\n Check,\n Clock,\n Copy,\n DollarSign,\n ExternalLink,\n Eye,\n FileText,\n LucideAngularModule,\n Mail,\n MessageSquare,\n Play,\n Share2,\n Target,\n TrendingUp,\n Users,\n Video,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-influencer-campaign-card, [ui-influencer-campaign-card]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n
\n
\n \n \n AR \n \n \n \n \n
\n\n
\n
\n

\n Alex Rivera · Tech & Design Creator\n

\n \n \n Active Campaign · Q3 Launch\n \n
\n\n \n
\n
\n \n @alextech\n (450k)\n
\n
\n \n @alextech\n (120k)\n
\n
\n \n @alextech\n (280k)\n
\n
\n\n \n
\n Developer Tools\n Hardware\n Productivity\n
\n
\n
\n\n \n
\n \n \n \n
\n
\n
\n
\n\n \n
\n \n
\n
\n
\n Total Reach\n
\n \n
\n
\n
\n
850,000
\n

850,000 cross-platform reach

\n
\n
\n 3 Channels\n +18.4% YoY\n
\n
\n
\n\n \n
\n
\n
\n Avg Engagement\n
\n \n
\n
\n
\n
5.8%
\n

Across YouTube & Twitter

\n
\n
\n vs 2.4% industry benchmark\n
\n
\n
\n\n \n
\n
\n
\n Contract Value\n
\n \n
\n
\n
\n
$6,500.00
\n

$6,500.00 Fixed + 10% Affiliate

\n
\n
\n Escrow Funded\n 50% Disbursed\n
\n
\n
\n\n \n
\n
\n
\n Campaign ROI\n
\n \n
\n
\n
\n
2.8x ROAS
\n

428 signups · $18,400 ARR generated

\n
\n
\n 14.2% CVR\n $43.00 CPA\n
\n
\n
\n
\n\n \n
\n
\n
\n

Contract Deliverables

\n

\n Deliverables status, review workflows, and live audience performance.\n

\n
\n
\n
\n Progress: 2 of 4 Completed \n (50%)\n
\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n
Deliverable & ScopeStatusLive PerformanceTimelineAction
\n
\n \n \n
\n
\n

Dedicated YouTube Review Video

\n

10-12 min dedicated review + bio affiliate link

\n
\n \n 		\n \n \n Completed\n \n \n
\n

48k views · 4.2k likes

\n

312 comments · 8.4% CTR

\n
\n 		\n Live Aug 15, 2026\n \n \n
\n
\n \n \n
\n
\n

Twitter / X Launch Thread

\n

8-part technical breakdown with demo clips

\n
\n \n 		\n \n \n Completed\n \n \n
\n

180 retweets · 1.2k bookmarks

\n

22.4k impressions

\n
\n 		\n Live Aug 18, 2026\n \n \n
\n
\n \n \n
\n
\n

TikTok Short & Instagram Reel

\n

60s vertical workflow demo highlighting UI speed

\n
\n \n 		\n \n \n Draft Pending Approval\n \n \n
\n

v2 cut ready for approval

\n

1080x1920 60fps · 58s

\n
\n 		\n \n Due Aug 28, 2026\n \n \n \n
\n
\n \n \n
\n
\n

Newsletter Feature Sponsorship

\n

Sponsored lead editorial placement + logo banner

\n
\n \n 		\n \n \n Scheduled\n \n \n
\n

Estimated 65,000 readers

\n

48% historical open rate

\n
\n 		\n Sep 02, 2026\n \n \n
\n
\n
\n
\n\n \n
\n
\n

Affiliate Link & Promo Code Performance

\n

\n Real-time redemption tracking, attribution metrics, and affiliate commission balance.\n

\n
\n
\n
\n \n
\n
\n \n
\n
\n Promo Code (20% Discount)\n Active\n
\n
\n \n ALEX20\n 20% off\n
\n \n
\n
\n\n \n\n \n
\n
\n Referral Campaign URL\n 14.2% CVR\n
\n
\n \n https://uipkge.dev/c/alex20\n
\n \n
\n
\n
\n
\n\n \n
\n
\n
\n Redemptions\n

428

\n

+32 this week

\n
\n
\n Commission Earned\n

$2,140.00

\n

10% standard fee

\n
\n
\n Gross Revenue\n

$21,400.00

\n

$50.00 AOV

\n
\n
\n\n \n
\n
\n \n Commission Milestone:\n 428 / 500 redemptions\n \n 85.6% to 15% rate boost\n
\n \n
\n\n \n \n
\n \n \n Next payout: $2,140.00 via\n Stripe Connect\n \n
\n Sep 15, 2026\n
\n
\n
\n \n \n \n `,\n})\nexport class UiInfluencerCampaignCardComponent {\n protected readonly BadgeCheck = BadgeCheck\n protected readonly Check = Check\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly DollarSign = DollarSign\n protected readonly ExternalLink = ExternalLink\n protected readonly Eye = Eye\n protected readonly FileText = FileText\n protected readonly Mail = Mail\n protected readonly MessageSquare = MessageSquare\n protected readonly Play = Play\n protected readonly Share2 = Share2\n protected readonly Target = Target\n protected readonly TrendingUp = TrendingUp\n protected readonly Users = Users\n protected readonly Video = Video\n\n @Input('class') className?: string\n\n readonly copiedCode = signal(false)\n readonly copiedLink = signal(false)\n private codeTimer: ReturnType | undefined\n private linkTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n clearTimeout(this.codeTimer)\n clearTimeout(this.linkTimer)\n })\n }\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-5xl space-y-6', this.className)\n }\n\n copyCode(): void {\n void navigator.clipboard?.writeText('ALEX20')\n this.copiedCode.set(true)\n clearTimeout(this.codeTimer)\n this.codeTimer = setTimeout(() => this.copiedCode.set(false), 2000)\n }\n\n copyLink(): void {\n void navigator.clipboard?.writeText('https://uipkge.dev/c/alex20')\n this.copiedLink.set(true)\n clearTimeout(this.linkTimer)\n this.linkTimer = setTimeout(() => this.copiedLink.set(false), 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/influencer-campaign-card/influencer-campaign-card.component.ts" }, { "path": "packages/registry-angular/blocks/influencer-campaign-card/index.ts", "content": "export { UiInfluencerCampaignCardComponent } from './influencer-campaign-card.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/influencer-campaign-card/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Creator partnership management card with verified creator hero profile, multi-channel reach demographics, 4-column campaign telemetry HUD, contract deliverables checklist with live asset telemetry, and affiliate promo code ROI tracker.", "categories": [ "marketing", "dashboard", "app" ] }