676 lines
32 KiB
Plaintext
676 lines
32 KiB
Plaintext
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 = "WrNexus"
|
|
brandTagline: string = "Identity Cloud"
|
|
brandAriaLabel: string = "WrNexus 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 = "WrNexus 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 WrNexus. 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="WrNexus 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="WrNexus 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="WrNexus 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="WrNexus 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>
|
|
}
|
|
}
|