UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Influencer Campaign Card

blockmarketing
Boilerplate repo

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.

Installation

$npx uipkge-ng@latest add influencer-campaign-card
Manifest:https://uipkge.dev/r/angular/influencer-campaign-card.jsonInstalls to:src/app/components/blocks/influencer-campaign-card/

Variants

Loading interactive previews…

npm dependencies

lucide-angular

Files installed (2)

  • src/app/components/blocks/influencer-campaign-card/influencer-campaign-card.component.ts27.1 kB
    // 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. Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal } from '@angular/core'
import {
  BadgeCheck,
  Check,
  Clock,
  Copy,
  DollarSign,
  ExternalLink,
  Eye,
  FileText,
  LucideAngularModule,
  Mail,
  MessageSquare,
  Play,
  Share2,
  Target,
  TrendingUp,
  Users,
  Video,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import {
  UiCardComponent,
  UiCardContentComponent,
  UiCardDescriptionComponent,
  UiCardHeaderComponent,
  UiCardTitleComponent,
} from '@/ui/card/card.component'
import { UiProgressComponent } from '@/ui/progress/progress.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'
import {
  UiTableBodyComponent,
  UiTableCellComponent,
  UiTableComponent,
  UiTableHeadComponent,
  UiTableHeaderComponent,
  UiTableRowComponent,
} from '@/ui/table/table.component'

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-influencer-campaign-card, [ui-influencer-campaign-card]',
  standalone: true,
  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiAvatarComponent,
    UiAvatarFallbackComponent,
    UiAvatarImageComponent,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiCardDescriptionComponent,
    UiCardHeaderComponent,
    UiCardTitleComponent,
    UiProgressComponent,
    UiSeparatorComponent,
    UiTableBodyComponent,
    UiTableCellComponent,
    UiTableComponent,
    UiTableHeadComponent,
    UiTableHeaderComponent,
    UiTableRowComponent,
  ],
  template: `
    <div data-slot="influencer-campaign-card" [class]="rootClass">
      <!-- 1. Creator Hero Header Card -->
      <div ui-card class="border-border overflow-hidden shadow-xs">
        <div
          class="from-primary/20 via-primary/10 border-border/50 h-28 w-full border-b bg-gradient-to-r to-transparent"
          aria-hidden="true"
        ></div>
        <div ui-card-content class="px-6 pt-0 pb-6">
          <div class="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
              <div class="relative -mt-12 size-20 shrink-0">
                <ui-avatar size="2xl" class="border-background size-20 border-4 shadow-xs">
                  <ui-avatar-image
                    src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=320&auto=format&fit=crop"
                    alt="Alex Rivera"
                  />
                  <ui-avatar-fallback class="bg-primary/10 text-primary text-lg font-semibold"> AR </ui-avatar-fallback>
                </ui-avatar>
                <span
                  class="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"
                >
                  <lucide-icon [img]="BadgeCheck" class="size-3.5" />
                </span>
              </div>

              <div class="space-y-2">
                <div class="flex flex-wrap items-center gap-2.5">
                  <h1 class="text-foreground text-xl font-bold tracking-tight">
                    Alex Rivera <span class="text-muted-foreground font-normal">· Tech & Design Creator</span>
                  </h1>
                  <span ui-badge variant="success" class="gap-1.5 font-medium">
                    <span class="bg-success size-1.5 animate-pulse rounded-full"></span>
                    Active Campaign · Q3 Launch
                  </span>
                </div>

                <!-- Channel Handles -->
                <div class="text-muted-foreground flex flex-wrap items-center gap-3 text-xs">
                  <div class="text-foreground flex items-center gap-1.5 font-medium">
                    <lucide-icon [img]="Play" class="text-destructive size-3.5" />
                    <span>&#64;alextech</span>
                    <span class="text-muted-foreground font-normal tabular-nums">(450k)</span>
                  </div>
                  <div class="text-foreground flex items-center gap-1.5 font-medium">
                    <lucide-icon [img]="Share2" class="text-info size-3.5" />
                    <span>&#64;alextech</span>
                    <span class="text-muted-foreground font-normal tabular-nums">(120k)</span>
                  </div>
                  <div class="text-foreground flex items-center gap-1.5 font-medium">
                    <lucide-icon [img]="Video" class="text-chart-1 size-3.5" />
                    <span>&#64;alextech</span>
                    <span class="text-muted-foreground font-normal tabular-nums">(280k)</span>
                  </div>
                </div>

                <!-- Niche Tags -->
                <div class="flex flex-wrap items-center gap-1.5 pt-1">
                  <span ui-badge variant="secondary" class="text-xs font-normal">Developer Tools</span>
                  <span ui-badge variant="secondary" class="text-xs font-normal">Hardware</span>
                  <span ui-badge variant="secondary" class="text-xs font-normal">Productivity</span>
                </div>
              </div>
            </div>

            <!-- Actions -->
            <div class="flex flex-wrap items-center gap-2 pt-2 sm:pt-0">
              <button ui-button size="sm" class="gap-1.5">
                <lucide-icon [img]="MessageSquare" class="size-4" />
                Message Creator
              </button>
              <button ui-button variant="outline" size="sm" class="gap-1.5">
                <lucide-icon [img]="FileText" class="size-4" />
                View Contract PDF
              </button>
              <button ui-button variant="outline" size="sm" class="gap-1.5">
                <lucide-icon [img]="Eye" class="size-4" />
                Review Draft Asset
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 2. 4 Campaign Telemetry Cards -->
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <!-- Reach -->
        <div ui-card class="border-border shadow-xs">
          <div ui-card-content class="space-y-3 p-5">
            <div class="flex items-center justify-between">
              <span class="text-muted-foreground text-xs font-medium tracking-wider uppercase">Total Reach</span>
              <div class="bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg">
                <lucide-icon [img]="Users" class="size-4" />
              </div>
            </div>
            <div class="space-y-1">
              <div class="text-foreground text-2xl font-bold tracking-tight tabular-nums">850,000</div>
              <p class="text-muted-foreground text-xs">850,000 cross-platform reach</p>
            </div>
            <div class="flex items-center gap-1.5 pt-1">
              <span ui-badge variant="secondary" class="text-xs font-medium">3 Channels</span>
              <span class="text-muted-foreground text-xs tabular-nums">+18.4% YoY</span>
            </div>
          </div>
        </div>

        <!-- Avg Engagement Rate -->
        <div ui-card class="border-border shadow-xs">
          <div ui-card-content class="space-y-3 p-5">
            <div class="flex items-center justify-between">
              <span class="text-muted-foreground text-xs font-medium tracking-wider uppercase">Avg Engagement</span>
              <div class="bg-success/10 text-success flex size-8 items-center justify-center rounded-lg">
                <lucide-icon [img]="TrendingUp" class="size-4" />
              </div>
            </div>
            <div class="space-y-1">
              <div class="text-foreground text-2xl font-bold tracking-tight tabular-nums">5.8%</div>
              <p class="text-muted-foreground text-xs">Across YouTube & Twitter</p>
            </div>
            <div class="flex items-center gap-1.5 pt-1">
              <span ui-badge variant="success" class="text-xs font-medium">vs 2.4% industry benchmark</span>
            </div>
          </div>
        </div>

        <!-- Contract Value & Fee -->
        <div ui-card class="border-border shadow-xs">
          <div ui-card-content class="space-y-3 p-5">
            <div class="flex items-center justify-between">
              <span class="text-muted-foreground text-xs font-medium tracking-wider uppercase">Contract Value</span>
              <div class="bg-info/10 text-info flex size-8 items-center justify-center rounded-lg">
                <lucide-icon [img]="DollarSign" class="size-4" />
              </div>
            </div>
            <div class="space-y-1">
              <div class="text-foreground text-2xl font-bold tracking-tight tabular-nums">$6,500.00</div>
              <p class="text-muted-foreground text-xs">$6,500.00 Fixed + 10% Affiliate</p>
            </div>
            <div class="flex items-center gap-1.5 pt-1">
              <span ui-badge variant="outline" class="text-xs font-medium">Escrow Funded</span>
              <span class="text-muted-foreground text-xs">50% Disbursed</span>
            </div>
          </div>
        </div>

        <!-- Campaign ROI / Conversions -->
        <div ui-card class="border-border shadow-xs">
          <div ui-card-content class="space-y-3 p-5">
            <div class="flex items-center justify-between">
              <span class="text-muted-foreground text-xs font-medium tracking-wider uppercase">Campaign ROI</span>
              <div class="bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg">
                <lucide-icon [img]="Target" class="size-4" />
              </div>
            </div>
            <div class="space-y-1">
              <div class="text-foreground text-2xl font-bold tracking-tight tabular-nums">2.8x ROAS</div>
              <p class="text-muted-foreground text-xs">428 signups · $18,400 ARR generated</p>
            </div>
            <div class="flex items-center gap-1.5 pt-1">
              <span ui-badge variant="success" class="text-xs font-medium">14.2% CVR</span>
              <span class="text-muted-foreground text-xs tabular-nums">$43.00 CPA</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 3. Contract Deliverables Checklist -->
      <div ui-card class="border-border shadow-xs">
        <div ui-card-header class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div class="space-y-1">
            <h3 ui-card-title class="text-base font-semibold">Contract Deliverables</h3>
            <p ui-card-description class="text-xs">
              Deliverables status, review workflows, and live audience performance.
            </p>
          </div>
          <div class="flex flex-col gap-1.5 sm:items-end">
            <div class="text-muted-foreground flex items-center gap-2 text-xs font-medium">
              <span> Progress: <strong class="text-foreground">2 of 4 Completed</strong> </span>
              <span class="text-muted-foreground tabular-nums">(50%)</span>
            </div>
            <ui-progress [value]="50" class="h-2 w-48 sm:w-56" />
          </div>
        </div>
        <div ui-card-content class="p-0">
          <div class="overflow-x-auto">
            <table ui-table>
              <thead ui-table-header>
                <tr ui-table-row>
                  <th ui-table-head class="min-w-[220px]">Deliverable & Scope</th>
                  <th ui-table-head class="w-[160px]">Status</th>
                  <th ui-table-head class="min-w-[200px]">Live Performance</th>
                  <th ui-table-head class="w-[140px]">Timeline</th>
                  <th ui-table-head class="w-[120px] text-right">Action</th>
                </tr>
              </thead>
              <tbody ui-table-body>
                <!-- Deliverable 1 -->
                <tr ui-table-row>
                  <td ui-table-cell>
                    <div class="flex items-start gap-3">
                      <div
                        class="bg-destructive/10 text-destructive mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md"
                      >
                        <lucide-icon [img]="Play" class="size-4" />
                      </div>
                      <div class="space-y-0.5">
                        <p class="text-foreground text-sm font-medium">Dedicated YouTube Review Video</p>
                        <p class="text-muted-foreground text-xs">10-12 min dedicated review + bio affiliate link</p>
                      </div>
                    </div>
                  </td>
                  <td ui-table-cell>
                    <span ui-badge variant="success" class="gap-1">
                      <lucide-icon [img]="Check" class="size-3" />
                      Completed
                    </span>
                  </td>
                  <td ui-table-cell>
                    <div class="space-y-0.5">
                      <p class="text-foreground text-xs font-medium tabular-nums">48k views · 4.2k likes</p>
                      <p class="text-muted-foreground text-xs tabular-nums">312 comments · 8.4% CTR</p>
                    </div>
                  </td>
                  <td ui-table-cell>
                    <span class="text-muted-foreground text-xs tabular-nums">Live Aug 15, 2026</span>
                  </td>
                  <td ui-table-cell class="text-right">
                    <button ui-button variant="ghost" size="xs" class="text-primary hover:text-primary gap-1">
                      Watch
                      <lucide-icon [img]="ExternalLink" class="size-3" />
                    </button>
                  </td>
                </tr>

                <!-- Deliverable 2 -->
                <tr ui-table-row>
                  <td ui-table-cell>
                    <div class="flex items-start gap-3">
                      <div
                        class="bg-info/10 text-info mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md"
                      >
                        <lucide-icon [img]="Share2" class="size-4" />
                      </div>
                      <div class="space-y-0.5">
                        <p class="text-foreground text-sm font-medium">Twitter / X Launch Thread</p>
                        <p class="text-muted-foreground text-xs">8-part technical breakdown with demo clips</p>
                      </div>
                    </div>
                  </td>
                  <td ui-table-cell>
                    <span ui-badge variant="success" class="gap-1">
                      <lucide-icon [img]="Check" class="size-3" />
                      Completed
                    </span>
                  </td>
                  <td ui-table-cell>
                    <div class="space-y-0.5">
                      <p class="text-foreground text-xs font-medium tabular-nums">180 retweets · 1.2k bookmarks</p>
                      <p class="text-muted-foreground text-xs tabular-nums">22.4k impressions</p>
                    </div>
                  </td>
                  <td ui-table-cell>
                    <span class="text-muted-foreground text-xs tabular-nums">Live Aug 18, 2026</span>
                  </td>
                  <td ui-table-cell class="text-right">
                    <button ui-button variant="ghost" size="xs" class="text-primary hover:text-primary gap-1">
                      View
                      <lucide-icon [img]="ExternalLink" class="size-3" />
                    </button>
                  </td>
                </tr>

                <!-- Deliverable 3 -->
                <tr ui-table-row>
                  <td ui-table-cell>
                    <div class="flex items-start gap-3">
                      <div
                        class="bg-chart-1/10 text-chart-1 mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md"
                      >
                        <lucide-icon [img]="Video" class="size-4" />
                      </div>
                      <div class="space-y-0.5">
                        <p class="text-foreground text-sm font-medium">TikTok Short & Instagram Reel</p>
                        <p class="text-muted-foreground text-xs">60s vertical workflow demo highlighting UI speed</p>
                      </div>
                    </div>
                  </td>
                  <td ui-table-cell>
                    <span ui-badge variant="warning" class="gap-1">
                      <lucide-icon [img]="Clock" class="size-3" />
                      Draft Pending Approval
                    </span>
                  </td>
                  <td ui-table-cell>
                    <div class="space-y-0.5">
                      <p class="text-muted-foreground text-xs">v2 cut ready for approval</p>
                      <p class="text-muted-foreground text-xs tabular-nums">1080x1920 60fps · 58s</p>
                    </div>
                  </td>
                  <td ui-table-cell>
                    <span class="text-warning dark:text-warning text-xs font-medium tabular-nums">
                      Due Aug 28, 2026
                    </span>
                  </td>
                  <td ui-table-cell class="text-right">
                    <button ui-button variant="outline" size="xs" class="gap-1">
                      Review
                      <lucide-icon [img]="Eye" class="size-3" />
                    </button>
                  </td>
                </tr>

                <!-- Deliverable 4 -->
                <tr ui-table-row>
                  <td ui-table-cell>
                    <div class="flex items-start gap-3">
                      <div
                        class="bg-warning/10 text-warning mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md"
                      >
                        <lucide-icon [img]="Mail" class="size-4" />
                      </div>
                      <div class="space-y-0.5">
                        <p class="text-foreground text-sm font-medium">Newsletter Feature Sponsorship</p>
                        <p class="text-muted-foreground text-xs">Sponsored lead editorial placement + logo banner</p>
                      </div>
                    </div>
                  </td>
                  <td ui-table-cell>
                    <span ui-badge variant="secondary" class="gap-1">
                      <lucide-icon [img]="Clock" class="size-3" />
                      Scheduled
                    </span>
                  </td>
                  <td ui-table-cell>
                    <div class="space-y-0.5">
                      <p class="text-muted-foreground text-xs tabular-nums">Estimated 65,000 readers</p>
                      <p class="text-muted-foreground text-xs tabular-nums">48% historical open rate</p>
                    </div>
                  </td>
                  <td ui-table-cell>
                    <span class="text-muted-foreground text-xs tabular-nums">Sep 02, 2026</span>
                  </td>
                  <td ui-table-cell class="text-right">
                    <button ui-button variant="ghost" size="xs" disabled class="opacity-50">Queued</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 4. Affiliate Link & Promo Code Performance Card -->
      <div ui-card class="border-border shadow-xs">
        <div ui-card-header>
          <h3 ui-card-title class="text-base font-semibold">Affiliate Link & Promo Code Performance</h3>
          <p ui-card-description class="text-xs">
            Real-time redemption tracking, attribution metrics, and affiliate commission balance.
          </p>
        </div>
        <div ui-card-content class="space-y-6">
          <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
            <!-- Left: Code & Link Controls -->
            <div class="space-y-4 lg:col-span-5">
              <div class="bg-muted/40 border-border space-y-4 rounded-lg border p-4">
                <!-- Promo Code -->
                <div class="space-y-1.5">
                  <div class="flex items-center justify-between text-xs">
                    <span class="text-muted-foreground font-medium">Promo Code (20% Discount)</span>
                    <span class="text-success font-medium">Active</span>
                  </div>
                  <div class="flex items-center gap-2">
                    <div
                      class="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 class="text-muted-foreground font-sans text-xs font-normal">20% off</span>
                    </div>
                    <button ui-button variant="outline" size="sm" class="shrink-0 gap-1.5 text-xs" (click)="copyCode()">
                      @if (copiedCode()) {
                        <lucide-icon [img]="Check" class="text-success size-3.5" />
                      } @else {
                        <lucide-icon [img]="Copy" class="text-muted-foreground size-3.5" />
                      }
                      {{ copiedCode() ? 'Copied' : 'Copy' }}
                    </button>
                  </div>
                </div>

                <ui-separator />

                <!-- Referral Link -->
                <div class="space-y-1.5">
                  <div class="flex items-center justify-between text-xs">
                    <span class="text-muted-foreground font-medium">Referral Campaign URL</span>
                    <span class="text-muted-foreground tabular-nums">14.2% CVR</span>
                  </div>
                  <div class="flex items-center gap-2">
                    <div
                      class="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 ui-button variant="outline" size="sm" class="shrink-0 gap-1.5 text-xs" (click)="copyLink()">
                      @if (copiedLink()) {
                        <lucide-icon [img]="Check" class="text-success size-3.5" />
                      } @else {
                        <lucide-icon [img]="Copy" class="text-muted-foreground size-3.5" />
                      }
                      {{ copiedLink() ? 'Copied' : 'Copy' }}
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Right: Telemetry & Commission Stats -->
            <div class="space-y-4 lg:col-span-7">
              <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                <div class="bg-muted/30 border-border space-y-1 rounded-lg border p-3">
                  <span class="text-muted-foreground text-xs">Redemptions</span>
                  <p class="text-foreground text-xl font-bold tabular-nums">428</p>
                  <p class="text-success text-success text-xs tabular-nums">+32 this week</p>
                </div>
                <div class="bg-muted/30 border-border space-y-1 rounded-lg border p-3">
                  <span class="text-muted-foreground text-xs">Commission Earned</span>
                  <p class="text-foreground text-xl font-bold tabular-nums">$2,140.00</p>
                  <p class="text-muted-foreground text-xs tabular-nums">10% standard fee</p>
                </div>
                <div class="bg-muted/30 border-border space-y-1 rounded-lg border p-3">
                  <span class="text-muted-foreground text-xs">Gross Revenue</span>
                  <p class="text-foreground text-xl font-bold tabular-nums">$21,400.00</p>
                  <p class="text-muted-foreground text-xs tabular-nums">$50.00 AOV</p>
                </div>
              </div>

              <!-- Milestone Progress Bar -->
              <div class="bg-muted/20 border-border space-y-2 rounded-lg border p-3.5">
                <div class="flex items-center justify-between text-xs">
                  <span class="text-muted-foreground">
                    Commission Milestone:
                    <strong class="text-foreground font-medium">428 / 500 redemptions</strong>
                  </span>
                  <span class="text-primary font-medium tabular-nums">85.6% to 15% rate boost</span>
                </div>
                <ui-progress [value]="85.6" class="h-2" />
              </div>

              <!-- Payout Schedule notice -->
              <div
                class="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 class="flex items-center gap-2">
                  <lucide-icon [img]="BadgeCheck" class="text-success size-4" />
                  <span>
                    Next payout: <strong class="text-foreground font-semibold tabular-nums">$2,140.00</strong> via
                    Stripe Connect
                  </span>
                </div>
                <span class="text-foreground font-medium tabular-nums">Sep 15, 2026</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class UiInfluencerCampaignCardComponent {
  protected readonly BadgeCheck = BadgeCheck
  protected readonly Check = Check
  protected readonly Clock = Clock
  protected readonly Copy = Copy
  protected readonly DollarSign = DollarSign
  protected readonly ExternalLink = ExternalLink
  protected readonly Eye = Eye
  protected readonly FileText = FileText
  protected readonly Mail = Mail
  protected readonly MessageSquare = MessageSquare
  protected readonly Play = Play
  protected readonly Share2 = Share2
  protected readonly Target = Target
  protected readonly TrendingUp = TrendingUp
  protected readonly Users = Users
  protected readonly Video = Video

  @Input('class') className?: string

  readonly copiedCode = signal(false)
  readonly copiedLink = signal(false)
  private codeTimer: ReturnType<typeof setTimeout> | undefined
  private linkTimer: ReturnType<typeof setTimeout> | undefined

  constructor() {
    inject(DestroyRef).onDestroy(() => {
      clearTimeout(this.codeTimer)
      clearTimeout(this.linkTimer)
    })
  }

  get rootClass(): string {
    return cn('mx-auto w-full max-w-5xl space-y-6', this.className)
  }

  copyCode(): void {
    void navigator.clipboard?.writeText('ALEX20')
    this.copiedCode.set(true)
    clearTimeout(this.codeTimer)
    this.codeTimer = setTimeout(() => this.copiedCode.set(false), 2000)
  }

  copyLink(): void {
    void navigator.clipboard?.writeText('https://uipkge.dev/c/alex20')
    this.copiedLink.set(true)
    clearTimeout(this.linkTimer)
    this.linkTimer = setTimeout(() => this.copiedLink.set(false), 2000)
  }
}
  • src/app/components/blocks/influencer-campaign-card/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/influencer-campaign-card.json