WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

feat: add reusable public chrome and named environments

Browse Source
This commit is contained in:
Clintchiz
2026-07-20 00:03:35 +05:30
parent f72aec7c8c
commit 1745d8d676
5 changed files with 136 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/AnnouncementBar.wrn
+22 -15
View File
@@ -1,12 +1,19 @@
component AnnouncementBar {
props {
class = ""
badge = "New"
message = "WrNexus Organizations is now available."
description = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
href = "/organizations"
actionLabel = "Explore organizations"
ariaLabel = "Announcement"
class: string = ""
badge: string = "New"
message: string = "WrNexus 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
@@ -33,10 +40,10 @@ component AnnouncementBar {
>
<div class="flex min-w-0 flex-1 items-center justify-center gap-3">
<!-- Badge -->
<span
<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="icon-[lucide--sparkles] h-3 w-3" aria-hidden="true" ></span>
<span class="{badgeIcon} h-3 w-3" aria-hidden="true" ></span>
{badge}
</span>
@@ -49,24 +56,24 @@ component AnnouncementBar {
{message}
</span>
<span class="hidden md:inline">
<span data-show="showDescription" class="hidden md:inline">
{description}
</span>
</p>
<!-- CTA -->
<a
<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="icon-[lucide--arrow-right] h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" ></span>
<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
<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"
@@ -75,10 +82,10 @@ component AnnouncementBar {
</a>
<!-- Close -->
<button
<button data-show="dismissible"
type="button"
@click="visible = false"
aria-label="Dismiss announcement"
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>