Influencer Campaign Card
blockmarketingCreator 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.
Installation
$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/influencer-campaign-card.json$npx shadcn@latest add https://uipkge.dev/r/react/influencer-campaign-card.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/influencer-campaign-card.json$bunx shadcn@latest add https://uipkge.dev/r/react/influencer-campaign-card.jsonNamed registry:
npx shadcn@latest add @uipkge-react/influencer-campaign-cardInstalls to:components/blocks/Variants
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
className | string | — | optional |
Files installed (1)
components/blocks/InfluencerCampaignCard.tsx24.9 kB
'use client' import * as React from 'react' import { BadgeCheck, Check, Clock, Copy, DollarSign, ExternalLink, Eye, FileText, Mail, MessageSquare, Play, Share2, Target, TrendingUp, Users, Video, } from 'lucide-react' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Progress } from '@/components/ui/progress' import { Separator } from '@/components/ui/separator' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' import { cn } from '@/lib/utils' export interface InfluencerCampaignCardProps { className?: string } export function InfluencerCampaignCard({ className }: InfluencerCampaignCardProps) { const [copiedCode, setCopiedCode] = React.useState(false) const [copiedLink, setCopiedLink] = React.useState(false) const copyCode = () => { navigator.clipboard?.writeText('ALEX20') setCopiedCode(true) setTimeout(() => { setCopiedCode(false) }, 2000) } const copyLink = () => { navigator.clipboard?.writeText('https://uipkge.dev/c/alex20') setCopiedLink(true) setTimeout(() => { setCopiedLink(false) }, 2000) } return ( <div data-slot="influencer-campaign-card" className={cn('mx-auto w-full max-w-5xl space-y-6', className)}> {/* 1. Creator Hero Header Card */} <Card className="border-border overflow-hidden shadow-xs"> <div className="from-primary/20 via-primary/10 border-border/50 h-28 w-full border-b bg-gradient-to-r to-transparent" aria-hidden="true" /> <CardContent className="px-6 pt-0 pb-6"> <div className="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between"> <div className="flex flex-col gap-4 sm:flex-row sm:items-start"> <div className="relative -mt-12 size-20 shrink-0"> <Avatar size="2xl" className="border-background size-20 border-4 shadow-xs"> <AvatarImage src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=320&auto=format&fit=crop" alt="Alex Rivera" /> <AvatarFallback className="bg-primary/10 text-primary text-lg font-semibold">AR</AvatarFallback> </Avatar> <span className="bg-primary text-primary-foreground ring-background absolute -right-1 -bottom-1 flex size-6 items-center justify-center rounded-full shadow-xs ring-2" title="Verified Creator" > <BadgeCheck className="size-3.5" /> </span> </div> <div className="space-y-2"> <div className="flex flex-wrap items-center gap-2.5"> <h1 className="text-foreground text-xl font-bold tracking-tight"> Alex Rivera <span className="text-muted-foreground font-normal">· Tech & Design Creator</span> </h1> <Badge variant="success" className="gap-1.5 font-medium"> <span className="bg-success size-1.5 animate-pulse rounded-full" /> Active Campaign · Q3 Launch </Badge> </div> {/* Channel Handles */} <div className="text-muted-foreground flex flex-wrap items-center gap-3 text-xs"> <div className="text-foreground flex items-center gap-1.5 font-medium"> <Play className="text-destructive size-3.5" /> <span>@alextech</span> <span className="text-muted-foreground font-normal tabular-nums">(450k)</span> </div> <div className="text-foreground flex items-center gap-1.5 font-medium"> <Share2 className="text-info size-3.5" /> <span>@alextech</span> <span className="text-muted-foreground font-normal tabular-nums">(120k)</span> </div> <div className="text-foreground flex items-center gap-1.5 font-medium"> <Video className="text-chart-1 size-3.5" /> <span>@alextech</span> <span className="text-muted-foreground font-normal tabular-nums">(280k)</span> </div> </div> {/* Niche Tags */} <div className="flex flex-wrap items-center gap-1.5 pt-1"> <Badge variant="secondary" className="text-xs font-normal"> Developer Tools </Badge> <Badge variant="secondary" className="text-xs font-normal"> Hardware </Badge> <Badge variant="secondary" className="text-xs font-normal"> Productivity </Badge> </div> </div> </div> {/* Actions */} <div className="flex flex-wrap items-center gap-2 pt-2 sm:pt-0"> <Button size="sm" className="gap-1.5"> <MessageSquare className="size-4" /> Message Creator </Button> <Button variant="outline" size="sm" className="gap-1.5"> <FileText className="size-4" /> View Contract PDF </Button> <Button variant="outline" size="sm" className="gap-1.5"> <Eye className="size-4" /> Review Draft Asset </Button> </div> </div> </CardContent> </Card> {/* 2. 4 Campaign Telemetry Cards */} <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"> {/* Reach */} <Card className="border-border shadow-xs"> <CardContent className="space-y-3 p-5"> <div className="flex items-center justify-between"> <span className="text-muted-foreground text-xs font-medium tracking-wider uppercase">Total Reach</span> <div className="bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg"> <Users className="size-4" /> </div> </div> <div className="space-y-1"> <div className="text-foreground text-2xl font-bold tracking-tight tabular-nums">850,000</div> <p className="text-muted-foreground text-xs">850,000 cross-platform reach</p> </div> <div className="flex items-center gap-1.5 pt-1"> <Badge variant="secondary" className="text-xs font-medium"> 3 Channels </Badge> <span className="text-muted-foreground text-xs tabular-nums">+18.4% YoY</span> </div> </CardContent> </Card> {/* Avg Engagement Rate */} <Card className="border-border shadow-xs"> <CardContent className="space-y-3 p-5"> <div className="flex items-center justify-between"> <span className="text-muted-foreground text-xs font-medium tracking-wider uppercase">Avg Engagement</span> <div className="bg-success/10 text-success flex size-8 items-center justify-center rounded-lg"> <TrendingUp className="size-4" /> </div> </div> <div className="space-y-1"> <div className="text-foreground text-2xl font-bold tracking-tight tabular-nums">5.8%</div> <p className="text-muted-foreground text-xs">Across YouTube & Twitter</p> </div> <div className="flex items-center gap-1.5 pt-1"> <Badge variant="success" className="text-xs font-medium"> vs 2.4% industry benchmark </Badge> </div> </CardContent> </Card> {/* Contract Value & Fee */} <Card className="border-border shadow-xs"> <CardContent className="space-y-3 p-5"> <div className="flex items-center justify-between"> <span className="text-muted-foreground text-xs font-medium tracking-wider uppercase">Contract Value</span> <div className="bg-info/10 text-info flex size-8 items-center justify-center rounded-lg"> <DollarSign className="size-4" /> </div> </div> <div className="space-y-1"> <div className="text-foreground text-2xl font-bold tracking-tight tabular-nums">$6,500.00</div> <p className="text-muted-foreground text-xs">$6,500.00 Fixed + 10% Affiliate</p> </div> <div className="flex items-center gap-1.5 pt-1"> <Badge variant="outline" className="text-xs font-medium"> Escrow Funded </Badge> <span className="text-muted-foreground text-xs">50% Disbursed</span> </div> </CardContent> </Card> {/* Campaign ROI / Conversions */} <Card className="border-border shadow-xs"> <CardContent className="space-y-3 p-5"> <div className="flex items-center justify-between"> <span className="text-muted-foreground text-xs font-medium tracking-wider uppercase">Campaign ROI</span> <div className="bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg"> <Target className="size-4" /> </div> </div> <div className="space-y-1"> <div className="text-foreground text-2xl font-bold tracking-tight tabular-nums">2.8x ROAS</div> <p className="text-muted-foreground text-xs">428 signups · $18,400 ARR generated</p> </div> <div className="flex items-center gap-1.5 pt-1"> <Badge variant="success" className="text-xs font-medium"> 14.2% CVR </Badge> <span className="text-muted-foreground text-xs tabular-nums">$43.00 CPA</span> </div> </CardContent> </Card> </div> {/* 3. Contract Deliverables Checklist */} <Card className="border-border shadow-xs"> <CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"> <div className="space-y-1"> <CardTitle className="text-base font-semibold">Contract Deliverables</CardTitle> <CardDescription className="text-xs"> Deliverables status, review workflows, and live audience performance. </CardDescription> </div> <div className="flex flex-col gap-1.5 sm:items-end"> <div className="text-muted-foreground flex items-center gap-2 text-xs font-medium"> <span> Progress: <strong className="text-foreground">2 of 4 Completed</strong> </span> <span className="text-muted-foreground tabular-nums">(50%)</span> </div> <Progress value={50} className="h-2 w-48 sm:w-56" /> </div> </CardHeader> <CardContent className="p-0"> <div className="overflow-x-auto"> <Table> <TableHeader> <TableRow> <TableHead className="min-w-[220px]">Deliverable & Scope</TableHead> <TableHead className="w-[160px]">Status</TableHead> <TableHead className="min-w-[200px]">Live Performance</TableHead> <TableHead className="w-[140px]">Timeline</TableHead> <TableHead className="w-[120px] text-right">Action</TableHead> </TableRow> </TableHeader> <TableBody> {/* Deliverable 1 */} <TableRow> <TableCell> <div className="flex items-start gap-3"> <div className="bg-destructive/10 text-destructive mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md"> <Play className="size-4" /> </div> <div className="space-y-0.5"> <p className="text-foreground text-sm font-medium">Dedicated YouTube Review Video</p> <p className="text-muted-foreground text-xs">10-12 min dedicated review + bio affiliate link</p> </div> </div> </TableCell> <TableCell> <Badge variant="success" className="gap-1"> <Check className="size-3" /> Completed </Badge> </TableCell> <TableCell> <div className="space-y-0.5"> <p className="text-foreground text-xs font-medium tabular-nums">48k views · 4.2k likes</p> <p className="text-muted-foreground text-xs tabular-nums">312 comments · 8.4% CTR</p> </div> </TableCell> <TableCell> <span className="text-muted-foreground text-xs tabular-nums">Live Aug 15, 2026</span> </TableCell> <TableCell className="text-right"> <Button variant="ghost" size="xs" className="text-primary hover:text-primary gap-1"> Watch <ExternalLink className="size-3" /> </Button> </TableCell> </TableRow> {/* Deliverable 2 */} <TableRow> <TableCell> <div className="flex items-start gap-3"> <div className="bg-info/10 text-info mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md"> <Share2 className="size-4" /> </div> <div className="space-y-0.5"> <p className="text-foreground text-sm font-medium">Twitter / X Launch Thread</p> <p className="text-muted-foreground text-xs">8-part technical breakdown with demo clips</p> </div> </div> </TableCell> <TableCell> <Badge variant="success" className="gap-1"> <Check className="size-3" /> Completed </Badge> </TableCell> <TableCell> <div className="space-y-0.5"> <p className="text-foreground text-xs font-medium tabular-nums">180 retweets · 1.2k bookmarks</p> <p className="text-muted-foreground text-xs tabular-nums">22.4k impressions</p> </div> </TableCell> <TableCell> <span className="text-muted-foreground text-xs tabular-nums">Live Aug 18, 2026</span> </TableCell> <TableCell className="text-right"> <Button variant="ghost" size="xs" className="text-primary hover:text-primary gap-1"> View <ExternalLink className="size-3" /> </Button> </TableCell> </TableRow> {/* Deliverable 3 */} <TableRow> <TableCell> <div className="flex items-start gap-3"> <div className="bg-chart-1/10 text-chart-1 mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md"> <Video className="size-4" /> </div> <div className="space-y-0.5"> <p className="text-foreground text-sm font-medium">TikTok Short & Instagram Reel</p> <p className="text-muted-foreground text-xs"> 60s vertical workflow demo highlighting UI speed </p> </div> </div> </TableCell> <TableCell> <Badge variant="warning" className="gap-1"> <Clock className="size-3" /> Draft Pending Approval </Badge> </TableCell> <TableCell> <div className="space-y-0.5"> <p className="text-muted-foreground text-xs">v2 cut ready for approval</p> <p className="text-muted-foreground text-xs tabular-nums">1080x1920 60fps · 58s</p> </div> </TableCell> <TableCell> <span className="text-warning dark:text-warning text-xs font-medium tabular-nums"> Due Aug 28, 2026 </span> </TableCell> <TableCell className="text-right"> <Button variant="outline" size="xs" className="gap-1"> Review <Eye className="size-3" /> </Button> </TableCell> </TableRow> {/* Deliverable 4 */} <TableRow> <TableCell> <div className="flex items-start gap-3"> <div className="bg-warning/10 text-warning mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md"> <Mail className="size-4" /> </div> <div className="space-y-0.5"> <p className="text-foreground text-sm font-medium">Newsletter Feature Sponsorship</p> <p className="text-muted-foreground text-xs"> Sponsored lead editorial placement + logo banner </p> </div> </div> </TableCell> <TableCell> <Badge variant="secondary" className="gap-1"> <Clock className="size-3" /> Scheduled </Badge> </TableCell> <TableCell> <div className="space-y-0.5"> <p className="text-muted-foreground text-xs tabular-nums">Estimated 65,000 readers</p> <p className="text-muted-foreground text-xs tabular-nums">48% historical open rate</p> </div> </TableCell> <TableCell> <span className="text-muted-foreground text-xs tabular-nums">Sep 02, 2026</span> </TableCell> <TableCell className="text-right"> <Button variant="ghost" size="xs" disabled className="opacity-50"> Queued </Button> </TableCell> </TableRow> </TableBody> </Table> </div> </CardContent> </Card> {/* 4. Affiliate Link & Promo Code Performance Card */} <Card className="border-border shadow-xs"> <CardHeader> <CardTitle className="text-base font-semibold">Affiliate Link & Promo Code Performance</CardTitle> <CardDescription className="text-xs"> Real-time redemption tracking, attribution metrics, and affiliate commission balance. </CardDescription> </CardHeader> <CardContent className="space-y-6"> <div className="grid grid-cols-1 gap-6 lg:grid-cols-12"> {/* Left: Code & Link Controls */} <div className="space-y-4 lg:col-span-5"> <div className="bg-muted/40 border-border space-y-4 rounded-lg border p-4"> {/* Promo Code */} <div className="space-y-1.5"> <div className="flex items-center justify-between text-xs"> <span className="text-muted-foreground font-medium">Promo Code (20% Discount)</span> <span className="text-success font-medium">Active</span> </div> <div className="flex items-center gap-2"> <div className="bg-background border-border text-primary flex flex-1 items-center justify-between rounded-md border px-3 py-1.5 font-mono text-sm font-semibold tracking-wider"> <span>ALEX20</span> <span className="text-muted-foreground font-sans text-xs font-normal">20% off</span> </div> <Button variant="outline" size="sm" className="shrink-0 gap-1.5 text-xs" onClick={copyCode}> {copiedCode ? ( <Check className="text-success size-3.5" /> ) : ( <Copy className="text-muted-foreground size-3.5" /> )} {copiedCode ? 'Copied' : 'Copy'} </Button> </div> </div> <Separator /> {/* Referral Link */} <div className="space-y-1.5"> <div className="flex items-center justify-between text-xs"> <span className="text-muted-foreground font-medium">Referral Campaign URL</span> <span className="text-muted-foreground tabular-nums">14.2% CVR</span> </div> <div className="flex items-center gap-2"> <div className="bg-background border-border text-muted-foreground flex-1 truncate rounded-md border px-3 py-1.5 font-mono text-xs"> https://uipkge.dev/c/alex20 </div> <Button variant="outline" size="sm" className="shrink-0 gap-1.5 text-xs" onClick={copyLink}> {copiedLink ? ( <Check className="text-success size-3.5" /> ) : ( <Copy className="text-muted-foreground size-3.5" /> )} {copiedLink ? 'Copied' : 'Copy'} </Button> </div> </div> </div> </div> {/* Right: Telemetry & Commission Stats */} <div className="space-y-4 lg:col-span-7"> <div className="grid grid-cols-1 gap-3 sm:grid-cols-3"> <div className="bg-muted/30 border-border space-y-1 rounded-lg border p-3"> <span className="text-muted-foreground text-xs">Redemptions</span> <p className="text-foreground text-xl font-bold tabular-nums">428</p> <p className="text-success text-success text-xs tabular-nums">+32 this week</p> </div> <div className="bg-muted/30 border-border space-y-1 rounded-lg border p-3"> <span className="text-muted-foreground text-xs">Commission Earned</span> <p className="text-foreground text-xl font-bold tabular-nums">$2,140.00</p> <p className="text-muted-foreground text-xs tabular-nums">10% standard fee</p> </div> <div className="bg-muted/30 border-border space-y-1 rounded-lg border p-3"> <span className="text-muted-foreground text-xs">Gross Revenue</span> <p className="text-foreground text-xl font-bold tabular-nums">$21,400.00</p> <p className="text-muted-foreground text-xs tabular-nums">$50.00 AOV</p> </div> </div> {/* Milestone Progress Bar */} <div className="bg-muted/20 border-border space-y-2 rounded-lg border p-3.5"> <div className="flex items-center justify-between text-xs"> <span className="text-muted-foreground"> Commission Milestone: <strong className="text-foreground font-medium">428 / 500 redemptions</strong> </span> <span className="text-primary font-medium tabular-nums">85.6% to 15% rate boost</span> </div> <Progress value={85.6} className="h-2" /> </div> {/* Payout Schedule notice */} <div className="border-border/70 bg-card text-muted-foreground flex items-center justify-between rounded-lg border px-3.5 py-2.5 text-xs"> <div className="flex items-center gap-2"> <BadgeCheck className="text-success size-4" /> <span> Next payout: <strong className="text-foreground font-semibold tabular-nums">$2,140.00</strong> via Stripe Connect </span> </div> <span className="text-foreground font-medium tabular-nums">Sep 15, 2026</span> </div> </div> </div> </CardContent> </Card> </div> ) }
Raw manifest:https://uipkge.dev/r/react/influencer-campaign-card.json