AnnouncementBar

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AnnouncementBar
  badge="New"
  message="WRNexusJS Organizations is now available."
  description="Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
  href="/organizations"
  actionLabel="Explore organizations"
/>

Legacy mount name: data-component="AnnouncementBar".

Props and attributes

Slots

This component does not declare a slot.

Events

• click

Source contract

Installed source: components/AnnouncementBar.wrn

component AnnouncementBar {
    props {
        class: string = ""
        badge: string = "New"
        message: string = "WRNexusJS Organizations is now available."
        description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
        href: string = "/organizations"
        actionLabel: string = "Explore organizations"
        ariaLabel: string = "Announcement"
        badgeIcon: string = "icon-[lucide--sparkles]"
        actionIcon: string = "icon-[lucide--arrow-right]"
        dismissLabel: string = "Dismiss announcement"
        showBadge: boolean = true
        showDescription: boolean = true
        showAction: boolean = true
        dismissible: boolean = true
    }

    state visible = true

    view {
        <aside
            role="region"
            aria-label="{ariaLabel}"
            class="relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white {class}"
            class:hidden="!visible"
        >
        <!-- Decorative background -->
        <div
                aria-hidden="true"
                class="pointer-events-none absolute inset-0 overflow-hidden"
            >
        <div class="absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10">
        </div>
        <div class="absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10">
        </div>
        </div>
        <div
                class="relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12"
            >
        <div class="flex min-w-0 flex-1 items-center justify-center gap-3">
        <!-- Badge -->
        <span data-show="showBadge"
                        class="hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex"
                    >
        <span class="{badgeIcon} h-3 w-3" aria-hidden="true" >
        </span>

                        {badge}
                    </span>
        <!-- Message -->
        <p
                        class="min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm"
                    >
        <span class="font-semibold text-slate-950 dark:text-white">
                            {message}
                        </span>
        <span data-show="showDescription" class="hidden md:inline">
                            {description}
                        </span>
        </p>
        <!-- CTA -->
        <a data-show="showAction"
                        href="{href}"
                        class="group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex"
                    >
                        {actionLabel}

                        <span class="{actionIcon} h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" >
        </span>
        </a>
        </div>
        <!-- Mobile CTA -->
        <a data-show="showAction"
                    href="{href}"
                    aria-label="{actionLabel}"
                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden"
                >
        <span class="icon-[lucide--arrow-up-right] h-4 w-4" aria-hidden="true" >
        </span>
        </a>
        <!-- Close -->
        <button data-show="dismissible"
                    type="button"
                    @click="visible = false"
                    aria-label="{dismissLabel}"
                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
                >
        <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" >
        </span>
        </button>
        </div>
        </aside>
    }
}