30 lines
1.7 KiB
Plaintext
30 lines
1.7 KiB
Plaintext
import { Badge, Button, Card } from "@wrnexus/ui"
|
|
|
|
component AccountStatus {
|
|
props {
|
|
status: string = "active"
|
|
title: string = "Account status"
|
|
activeMessage: string = "Your account is active and ready to use."
|
|
pendingMessage: string = "Verify your contact details to activate your account."
|
|
lockedMessage: string = "Your account is temporarily locked for security."
|
|
disabledMessage: string = "Your account has been disabled."
|
|
supportHref: string = "/support"
|
|
color: string = "primary"
|
|
size: string = "md"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<Card {...attrs} title='{title}' color='{color}' size='{size}' align="center" class='w-full max-w-lg {class}'>
|
|
<div class="flex flex-col items-center text-center" data-status='{status}'>
|
|
<span class='flex size-14 items-center justify-center rounded-full bg-[var(--wrn-color-surface-2)] text-[var(--wrn-color-primary)]'>
|
|
{#if status == "active"}<span class="icon-[lucide--circle-check] size-7"></span>{:else if status == "pending"}<span class="icon-[lucide--clock-3] size-7"></span>{:else}<span class="icon-[lucide--shield-alert] size-7"></span>{/if}
|
|
</span>
|
|
<p class="mx-auto mt-3 max-w-md text-sm text-[var(--wrn-color-muted)]">{status == "active" ? activeMessage : status == "pending" ? pendingMessage : status == "locked" ? lockedMessage : disabledMessage}</p>
|
|
<Badge label='{status}' color='{status == "active" ? "success" : status == "pending" ? "warning" : "danger"}' variant="soft" size="sm" />
|
|
{#if status != "active"}<Button href='{supportHref}' label="Contact support" color='{color}' size='{size}' class="mt-4" />{/if}
|
|
</div>
|
|
</Card>
|
|
}
|
|
}
|