Banner Announcement Sticky

Installation

Variants

Files installed (2)

• src/app/components/blocks/banner-announcement-sticky/banner-announcement-sticky.component.ts2.9 kB

  Copy

  // Sticky release announcement banner with version badge and dismiss trigger.
  // Port of the Vue/React block 1:1 — same v2.4.0 copy, same release-notes link.
  // Deprecated alias of the announcement broadcast center (use ui-announcement).
  import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'
  import { ArrowRight, LucideAngularModule, Megaphone, X } from 'lucide-angular'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { cn } from '@/lib/utils'
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-banner-announcement-sticky, [ui-banner-announcement-sticky]',
    standalone: true,
    // The block renders its own root <aside>: keep this wrapper out of the layout.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiBadgeComponent],
    template: `
      @if (isVisible()) {
        <aside data-slot="banner-announcement-sticky" [class]="rootClass">
          <div class="mx-auto flex max-w-7xl items-center justify-between gap-4 font-mono text-xs">
            <!-- Left / Center Content -->
            <div class="flex min-w-0 flex-1 items-center justify-center gap-3 sm:justify-start">
              <span
                ui-badge
                variant="secondary"
                class="bg-primary/10 text-primary border-primary/20 shrink-0 px-2 py-0.5 text-xs font-bold tracking-wider uppercase"
              >
                v2.4.0 Release
              </span>
  
              <p class="text-foreground flex items-center gap-1.5 truncate">
                <lucide-icon [img]="Megaphone" class="text-primary hidden size-3 shrink-0 sm:inline" />
                <span>Announcing 450+ Marketing &amp; SaaS Blocks with Tailwind v4 OKLCH token engine.</span>
              </p>
  
              <a href="#" class="text-primary inline-flex shrink-0 items-center gap-1 font-bold hover:underline">
                <span>Read Release Notes</span>
                <lucide-icon [img]="ArrowRight" class="size-3" />
              </a>
            </div>
  
            <!-- Dismiss Trigger Button -->
            <button
              type="button"
              class="hover:bg-muted text-muted-foreground hover:text-foreground flex size-6 shrink-0 items-center justify-center rounded-md transition-colors"
              aria-label="Dismiss banner"
              (click)="dismissBanner()"
            >
              <lucide-icon [img]="X" class="size-3.5" />
            </button>
          </div>
        </aside>
      }
    `,
  })
  export class UiBannerAnnouncementStickyComponent {
    protected readonly ArrowRight = ArrowRight
    protected readonly Megaphone = Megaphone
    protected readonly X = X
  
    @Input('class') className?: string
  
    readonly isVisible = signal(true)
  
    get rootClass(): string {
      return cn(
        'border-border bg-card/90 relative z-50 border-b px-4 py-2.5 backdrop-blur-md transition-colors sm:px-6',
        this.className,
      )
    }
  
    dismissBanner(): void {
      this.isVisible.set(false)
    }
  }
  

• src/app/components/blocks/banner-announcement-sticky/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/banner-announcement-sticky.json