84 lines
2.1 KiB
Plaintext
84 lines
2.1 KiB
Plaintext
component AuthSplitLayout {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
eyebrow: string = "Secure identity"
|
|
title: string = "Welcome back"
|
|
description: string = ""
|
|
brand: string = "Police Management System"
|
|
features: unknown[] = []
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<main
|
|
class="wire-auth-split wire-next--color-{color} wire-next--size-{size} {class}"
|
|
>
|
|
<section
|
|
class="wire-auth-split__content"
|
|
>
|
|
<div
|
|
class="wire-auth-split__brand"
|
|
>
|
|
<span
|
|
class="icon-[lucide--shield-check]"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
<span><strong>{brand}</strong><small>Unified identity and access</small></span>
|
|
</div>
|
|
<div
|
|
class="wire-auth-split__message"
|
|
>
|
|
<span
|
|
class="wire-auth-split__eyebrow"
|
|
>
|
|
{eyebrow}
|
|
</span>
|
|
<h1>{title}</h1>
|
|
{#if description}
|
|
<p>{description}</p>
|
|
{/if}
|
|
<div
|
|
class="wire-auth-split__features"
|
|
>
|
|
{#each features as item}
|
|
<article>
|
|
<span
|
|
class="{item.icon || 'icon-[lucide--check-circle-2]'}"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
<span><strong>{item.label}</strong>
|
|
{#if item.description}
|
|
<small>{item.description}</small>
|
|
{/if}
|
|
</span>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
<slot
|
|
name="aside-extra"
|
|
/>
|
|
</div>
|
|
<small
|
|
class="wire-auth-split__legal"
|
|
>
|
|
Authorised access only · Activity may be monitored and audited.
|
|
</small>
|
|
</section>
|
|
<section
|
|
class="wire-auth-split__form"
|
|
>
|
|
<div
|
|
class="wire-auth-split__form-inner"
|
|
>
|
|
<slot
|
|
name="form"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
}
|
|
}
|