663 lines
42 KiB
Plaintext
663 lines
42 KiB
Plaintext
page PublicFootercomponent {
|
|
seo {
|
|
title = "PublicFooter component"
|
|
description = "Reusable public footer component."
|
|
}
|
|
|
|
view {
|
|
<div class="docs-shell">
|
|
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
<header class="topbar">
|
|
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
|
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
|
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.78</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
|
</header>
|
|
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
|
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PublicFooter</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>PublicFooter</h1><p>Reusable public footer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.78</span><span>37 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><PublicFooter
|
|
homeHref="/"
|
|
brandName="WRNexusJS"
|
|
brandTagline="Identity Cloud"
|
|
brandAriaLabel="WRNexusJS home"
|
|
brandIcon="icon-[lucide--blocks]"
|
|
/></code></pre><p>Legacy mount name: <code>data-component="PublicFooter"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>homeHref</code></td><td><code>string</code></td><td>Optional</td><td><code>"/"</code></td></tr><tr><td><code>brandName</code></td><td><code>string</code></td><td>Optional</td><td><code>"WRNexusJS"</code></td></tr><tr><td><code>brandTagline</code></td><td><code>string</code></td><td>Optional</td><td><code>"Identity Cloud"</code></td></tr><tr><td><code>brandAriaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"WRNexusJS home"</code></td></tr><tr><td><code>brandIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>"icon-[lucide--blocks]"</code></td></tr><tr><td><code>brandDescription</code></td><td><code>string</code></td><td>Optional</td><td><code>"Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications."</code></td></tr><tr><td><code>statusLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"All systems operational"</code></td></tr><tr><td><code>statusHref</code></td><td><code>string</code></td><td>Optional</td><td><code>"/status"</code></td></tr><tr><td><code>newsletterEyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>"WRNexusJS updates"</code></td></tr><tr><td><code>newsletterTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>"Identity insights delivered to your inbox"</code></td></tr><tr><td><code>newsletterDescription</code></td><td><code>string</code></td><td>Optional</td><td><code>"Get product updates, security guidance, implementation strategies, and practical identity architecture resources."</code></td></tr><tr><td><code>newsletterAction</code></td><td><code>string</code></td><td>Optional</td><td><code>"/api/newsletter/subscribe"</code></td></tr><tr><td><code>newsletterButtonLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Subscribe"</code></td></tr><tr><td><code>newsletterPlaceholder</code></td><td><code>string</code></td><td>Optional</td><td><code>"Enter your work email"</code></td></tr><tr><td><code>newsletterSuccessMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>"Thanks. Please check your inbox to confirm your subscription."</code></td></tr><tr><td><code>newsletterPrivacyLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"privacy policy"</code></td></tr><tr><td><code>newsletterPrivacyHref</code></td><td><code>string</code></td><td>Optional</td><td><code>"/privacy"</code></td></tr><tr><td><code>newsletterFinePrintPrefix</code></td><td><code>string</code></td><td>Optional</td><td><code>"No spam. Unsubscribe at any time. Read our"</code></td></tr><tr><td><code>newsletterFinePrintSuffix</code></td><td><code>string</code></td><td>Optional</td><td><code>"."</code></td></tr><tr><td><code>newsletterEmailLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Work email address"</code></td></tr><tr><td><code>newsletterEmailName</code></td><td><code>string</code></td><td>Optional</td><td><code>"email"</code></td></tr><tr><td><code>copyrightText</code></td><td><code>string</code></td><td>Optional</td><td><code>"© 2026 WRNexusJS. All rights reserved."</code></td></tr><tr><td><code>attributionText</code></td><td><code>string</code></td><td>Optional</td><td><code>"Built by WorkRoot Workspace."</code></td></tr><tr><td><code>showNewsletter</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showSocialLinks</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showThemeToggle</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showStatus</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showCookiePreferences</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>cookiePreferencesLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Cookie preferences"</code></td></tr><tr><td><code>themeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Theme"</code></td></tr><tr><td><code>themeToggleLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Toggle color theme"</code></td></tr><tr><td><code>legalTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>"Legal"</code></td></tr><tr><td><code>socialLinks</code></td><td><code>PublicFooterLink[]</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>navigationColumns</code></td><td><code>PublicFooterColumn[]</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>legalLinks</code></td><td><code>PublicFooterLink[]</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>navigationAriaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Footer navigation"</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>navigation</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>submit</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PublicFooter.wrn</code></p><pre data-language="wrn"><code>component PublicFooter {
|
|
types {
|
|
interface PublicFooterLink {
|
|
label: string
|
|
href: string
|
|
ariaLabel?: string
|
|
target?: string
|
|
icon?: string
|
|
}
|
|
interface PublicFooterColumn {
|
|
title: string
|
|
links: PublicFooterLink[]
|
|
}
|
|
}
|
|
props {
|
|
class: string = ""
|
|
homeHref: string = "/"
|
|
brandName: string = "WRNexusJS"
|
|
brandTagline: string = "Identity Cloud"
|
|
brandAriaLabel: string = "WRNexusJS home"
|
|
brandIcon: string = "icon-[lucide--blocks]"
|
|
brandDescription: string = "Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications."
|
|
statusLabel: string = "All systems operational"
|
|
statusHref: string = "/status"
|
|
newsletterEyebrow: string = "WRNexusJS updates"
|
|
newsletterTitle: string = "Identity insights delivered to your inbox"
|
|
newsletterDescription: string = "Get product updates, security guidance, implementation strategies, and practical identity architecture resources."
|
|
newsletterAction: string = "/api/newsletter/subscribe"
|
|
newsletterButtonLabel: string = "Subscribe"
|
|
newsletterPlaceholder: string = "Enter your work email"
|
|
newsletterSuccessMessage: string = "Thanks. Please check your inbox to confirm your subscription."
|
|
newsletterPrivacyLabel: string = "privacy policy"
|
|
newsletterPrivacyHref: string = "/privacy"
|
|
newsletterFinePrintPrefix: string = "No spam. Unsubscribe at any time. Read our"
|
|
newsletterFinePrintSuffix: string = "."
|
|
newsletterEmailLabel: string = "Work email address"
|
|
newsletterEmailName: string = "email"
|
|
copyrightText: string = "© 2026 WRNexusJS. All rights reserved."
|
|
attributionText: string = "Built by WorkRoot Workspace."
|
|
showNewsletter: boolean = true
|
|
showSocialLinks: boolean = true
|
|
showThemeToggle: boolean = true
|
|
showStatus: boolean = true
|
|
showCookiePreferences: boolean = true
|
|
cookiePreferencesLabel: string = "Cookie preferences"
|
|
themeLabel: string = "Theme"
|
|
themeToggleLabel: string = "Toggle color theme"
|
|
legalTitle: string = "Legal"
|
|
socialLinks: PublicFooterLink[] = []
|
|
navigationColumns: PublicFooterColumn[] = []
|
|
legalLinks: PublicFooterLink[] = []
|
|
navigationAriaLabel: string = "Footer navigation"
|
|
}
|
|
state email = ""
|
|
state newsletterSubmitted = false
|
|
|
|
view {
|
|
<footer
|
|
class="relative overflow-hidden border-t border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-slate-950 {class}"
|
|
>
|
|
<!-- Decorative background -->
|
|
<div
|
|
aria-hidden="true"
|
|
class="pointer-events-none absolute inset-x-0 top-0 h-96 overflow-hidden"
|
|
>
|
|
<div class="absolute -left-32 -top-48 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10">
|
|
</div>
|
|
<div class="absolute -right-32 -top-48 h-96 w-96 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10">
|
|
</div>
|
|
</div>
|
|
<div class="relative w-full px-5 py-12 sm:px-8 lg:px-10 lg:py-16 xl:px-12">
|
|
<!-- Newsletter and CTA -->
|
|
<section data-show="showNewsletter"
|
|
aria-labelledby="footer-newsletter-title"
|
|
class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 sm:p-8 lg:p-10"
|
|
>
|
|
<div aria-hidden="true" class="absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" >
|
|
</div>
|
|
<div aria-hidden="true" class="absolute -bottom-24 -left-24 h-64 w-64 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" >
|
|
</div>
|
|
<div class="relative grid items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,0.75fr)]">
|
|
<div>
|
|
<span
|
|
class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/70 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--mail-plus] h-3.5 w-3.5" aria-hidden="true" >
|
|
</span>
|
|
|
|
{newsletterEyebrow}
|
|
</span>
|
|
<h2
|
|
id="footer-newsletter-title"
|
|
class="mt-5 max-w-2xl text-2xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-3xl"
|
|
>
|
|
{newsletterTitle}
|
|
</h2>
|
|
<p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-400 sm:text-base">
|
|
{newsletterDescription}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<form
|
|
method="post"
|
|
action="{newsletterAction}"
|
|
@submit="newsletterSubmitted = true"
|
|
class="rounded-2xl border border-slate-200 bg-white/80 p-2 shadow-lg shadow-slate-950/5 backdrop-blur-sm dark:border-white/10 dark:bg-white/5"
|
|
>
|
|
<div class="flex flex-col gap-2 sm:flex-row">
|
|
<label
|
|
class="sr-only"
|
|
for="footer-newsletter-email"
|
|
>
|
|
{newsletterEmailLabel}
|
|
</label>
|
|
<div class="relative min-w-0 flex-1">
|
|
<span class="icon-[lucide--mail] pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" aria-hidden="true" >
|
|
</span>
|
|
<input
|
|
id="footer-newsletter-email"
|
|
name="{newsletterEmailName}"
|
|
type="email"
|
|
autocomplete="email"
|
|
required
|
|
bind:value="email"
|
|
placeholder="{newsletterPlaceholder}"
|
|
class="h-12 w-full rounded-xl border border-transparent bg-transparent pl-11 pr-4 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-indigo-300 focus:bg-white focus:ring-4 focus:ring-indigo-500/10 dark:text-white dark:focus:border-indigo-500/30 dark:focus:bg-slate-900"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="group inline-flex h-12 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
|
|
>
|
|
{newsletterButtonLabel}
|
|
|
|
<span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p class="mt-3 flex items-start gap-2 text-xs leading-5 text-slate-500 dark:text-slate-400">
|
|
<span class="icon-[lucide--shield-check] mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" >
|
|
</span>
|
|
|
|
{newsletterFinePrintPrefix}
|
|
<a
|
|
href="{newsletterPrivacyHref}"
|
|
class="font-semibold text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
{newsletterPrivacyLabel}
|
|
</a>{newsletterFinePrintSuffix}
|
|
</p>
|
|
<div
|
|
data-show="newsletterSubmitted"
|
|
role="status"
|
|
class="mt-3 flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-sm font-medium text-emerald-800 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300"
|
|
>
|
|
<span class="icon-[lucide--circle-check] h-4 w-4 shrink-0" aria-hidden="true" >
|
|
</span>
|
|
|
|
{newsletterSuccessMessage}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Main footer -->
|
|
<div class="mt-12 grid gap-10 lg:grid-cols-[minmax(16rem,1.25fr)_minmax(0,3fr)] lg:gap-16">
|
|
<!-- Brand -->
|
|
<div>
|
|
<a
|
|
href="{homeHref}"
|
|
aria-label="{brandAriaLabel}"
|
|
class="group inline-flex items-center gap-3 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
|
|
>
|
|
<span
|
|
class="grid h-11 w-11 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 transition group-hover:-translate-y-0.5 group-hover:bg-indigo-500"
|
|
>
|
|
<span class="{brandIcon} h-5 w-5" aria-hidden="true" >
|
|
</span>
|
|
</span>
|
|
<span>
|
|
<span class="block text-lg font-bold tracking-tight text-slate-950 dark:text-white">
|
|
{brandName}
|
|
</span>
|
|
<span
|
|
class="block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"
|
|
>
|
|
{brandTagline}
|
|
</span>
|
|
</span>
|
|
</a>
|
|
<p class="mt-5 max-w-sm text-sm leading-6 text-slate-600 dark:text-slate-400">
|
|
{brandDescription}
|
|
</p>
|
|
<div data-show="showStatus" class="mt-6 flex flex-wrap items-center gap-2">
|
|
<a
|
|
href="{statusHref}"
|
|
class="inline-flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:hover:border-emerald-500/30"
|
|
>
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60">
|
|
</span>
|
|
<span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500">
|
|
</span>
|
|
</span>
|
|
|
|
{statusLabel}
|
|
</a>
|
|
</div>
|
|
<!-- Social links -->
|
|
<div data-show="showSocialLinks" class="mt-6 flex items-center gap-2">
|
|
{#if socialLinks.length > 0}
|
|
{#each socialLinks as item}
|
|
<a href="{item.href}" target="{item.target || '_blank'}" rel="noopener noreferrer" aria-label="{item.ariaLabel || item.label}" class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300">
|
|
<span class="{item.icon || 'icon-[lucide--external-link]'} h-4.5 w-4.5" aria-hidden="true">
|
|
</span>
|
|
<span class="sr-only">{item.label}</span>
|
|
</a>
|
|
{/each}
|
|
{:else}
|
|
<a
|
|
href="https://github.com/wrnexus"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="WRNexusJS on GitHub"
|
|
class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--github] h-4.5 w-4.5" aria-hidden="true" >
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="https://www.linkedin.com/company/wrnexus"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="WRNexusJS on LinkedIn"
|
|
class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--linkedin] h-4.5 w-4.5" aria-hidden="true" >
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="https://x.com/wrnexus"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="WRNexusJS on X"
|
|
class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--twitter] h-4.5 w-4.5" aria-hidden="true" >
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="https://www.youtube.com/@wrnexus"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="WRNexusJS on YouTube"
|
|
class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--youtube] h-4.5 w-4.5" aria-hidden="true" >
|
|
</span>
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<!-- Navigation columns -->
|
|
<nav
|
|
aria-label="{navigationAriaLabel}"
|
|
class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-3 xl:grid-cols-5"
|
|
>
|
|
<slot name="navigation">
|
|
{#if navigationColumns.length > 0}
|
|
{#each navigationColumns as column}
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">{column.title}</h3>
|
|
<ul class="mt-4 space-y-3">{#each column.links as item}<li>
|
|
<a href="{item.href}" target="{item.target || '_self'}" aria-label="{item.ariaLabel || item.label}" class="footer-link">{item.label}</a>
|
|
</li>{/each}</ul>
|
|
</div>
|
|
{/each}
|
|
{:else}
|
|
<!-- Product -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Product
|
|
</h3>
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/platform"
|
|
class="footer-link"
|
|
>
|
|
Platform
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/authentication"
|
|
class="footer-link"
|
|
>
|
|
Authentication
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/user-management"
|
|
class="footer-link"
|
|
>
|
|
User management
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/organizations"
|
|
class="footer-link"
|
|
>
|
|
Organizations
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/authorization"
|
|
class="footer-link"
|
|
>
|
|
Authorization
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/enterprise-sso"
|
|
class="footer-link"
|
|
>
|
|
Enterprise SSO
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Solutions -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Solutions
|
|
</h3>
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/solutions/startups"
|
|
class="footer-link"
|
|
>
|
|
Startups
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/solutions/saas"
|
|
class="footer-link"
|
|
>
|
|
SaaS
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/solutions/enterprise"
|
|
class="footer-link"
|
|
>
|
|
Enterprise
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/solutions/developers"
|
|
class="footer-link"
|
|
>
|
|
Developers
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/solutions/agencies"
|
|
class="footer-link"
|
|
>
|
|
Agencies
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/solutions/b2b"
|
|
class="footer-link"
|
|
>
|
|
B2B
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Developers -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Developers
|
|
</h3>
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/docs"
|
|
class="footer-link"
|
|
>
|
|
Documentation
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/docs/api"
|
|
class="footer-link"
|
|
>
|
|
API reference
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/sdks"
|
|
class="footer-link"
|
|
>
|
|
SDKs
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/examples"
|
|
class="footer-link"
|
|
>
|
|
Examples
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/docs/webhooks"
|
|
class="footer-link"
|
|
>
|
|
Webhooks
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/changelog"
|
|
class="footer-link"
|
|
>
|
|
Changelog
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Resources -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Resources
|
|
</h3>
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/blog"
|
|
class="footer-link"
|
|
>
|
|
Blog
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/guides"
|
|
class="footer-link"
|
|
>
|
|
Guides
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/customers"
|
|
class="footer-link"
|
|
>
|
|
Customers
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/help"
|
|
class="footer-link"
|
|
>
|
|
Help center
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/security"
|
|
class="footer-link"
|
|
>
|
|
Security
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/trust"
|
|
class="footer-link"
|
|
>
|
|
Trust center
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Company -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Company
|
|
</h3>
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/about"
|
|
class="footer-link"
|
|
>
|
|
About
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/careers"
|
|
class="footer-link"
|
|
>
|
|
Careers
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/partners"
|
|
class="footer-link"
|
|
>
|
|
Partners
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/contact"
|
|
class="footer-link"
|
|
>
|
|
Contact
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/pricing"
|
|
class="footer-link"
|
|
>
|
|
Pricing
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/status"
|
|
class="footer-link"
|
|
>
|
|
Status
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{/if}
|
|
</slot>
|
|
</nav>
|
|
</div>
|
|
<!-- Bottom bar -->
|
|
<div
|
|
class="mt-12 flex flex-col gap-5 border-t border-slate-200 pt-6 dark:border-white/10 lg:flex-row lg:items-center lg:justify-between"
|
|
>
|
|
<div
|
|
class="flex flex-col gap-2 text-xs text-slate-500 dark:text-slate-400 sm:flex-row sm:items-center sm:gap-4"
|
|
>
|
|
<p>
|
|
{copyrightText}
|
|
</p>
|
|
<span class="hidden h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700 sm:block">
|
|
</span>
|
|
<p>
|
|
{attributionText}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-x-5 gap-y-3">
|
|
{#if legalLinks.length > 0}
|
|
{#each legalLinks as item}<a href="{item.href}" target="{item.target || '_self'}" class="footer-bottom-link">{item.label}</a>{/each}
|
|
{:else}
|
|
<a
|
|
href="/privacy"
|
|
class="footer-bottom-link"
|
|
>
|
|
Privacy
|
|
</a>
|
|
<a
|
|
href="/terms"
|
|
class="footer-bottom-link"
|
|
>
|
|
Terms
|
|
</a>
|
|
<a
|
|
href="/cookies"
|
|
class="footer-bottom-link"
|
|
>
|
|
Cookies
|
|
</a>
|
|
<a
|
|
href="/legal"
|
|
class="footer-bottom-link"
|
|
>
|
|
{legalTitle}
|
|
</a>
|
|
{/if}
|
|
|
|
<button data-show="showCookiePreferences"
|
|
type="button"
|
|
data-open-cookie-preferences
|
|
class="footer-bottom-link"
|
|
>
|
|
{cookiePreferencesLabel}
|
|
</button>
|
|
<button data-show="showThemeToggle"
|
|
type="button"
|
|
data-wire-theme-toggle
|
|
aria-label="{themeToggleLabel}"
|
|
title="{themeToggleLabel}"
|
|
class="inline-flex items-center gap-2 rounded-lg text-xs font-semibold text-slate-500 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--moon] h-3.5 w-3.5 dark:hidden" aria-hidden="true" >
|
|
</span>
|
|
<span class="icon-[lucide--sun] hidden h-3.5 w-3.5 dark:block" aria-hidden="true" >
|
|
</span>
|
|
|
|
{themeLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
}
|
|
}
|
|
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
|
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.78</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
|
<BackToTop />
|
|
</div>
|
|
}
|
|
}
|