108 lines
4.5 KiB
Plaintext
108 lines
4.5 KiB
Plaintext
component MetricCard {
|
|
props {
|
|
label = "Metric"
|
|
value = "0"
|
|
description = ""
|
|
icon = ""
|
|
prefix = ""
|
|
suffix = ""
|
|
trend = ""
|
|
trendLabel = ""
|
|
trendDirection = "neutral"
|
|
href = ""
|
|
actionLabel = ""
|
|
size = "default"
|
|
color = "primary"
|
|
variant = "default"
|
|
align = "left"
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<article
|
|
data-ui-component="MetricCard"
|
|
class='group relative flex h-full flex-col rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-5 shadow-sm transition {class}'
|
|
class:p-4='size === "sm"'
|
|
class:p-6='size === "lg"'
|
|
class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
|
|
class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
|
|
class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
|
|
class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
|
|
class:bg-transparent='variant === "minimal"'
|
|
class:border-transparent='variant === "minimal"'
|
|
class:shadow-none='variant === "minimal"'
|
|
class:text-center='align === "center"'
|
|
class:items-center='align === "center"'
|
|
class:text-right='align === "right"'
|
|
class:items-end='align === "right"'
|
|
class:hover:border-[var(--wire-color-primary)]='href !== ""'
|
|
class:hover:shadow-lg='href !== ""'
|
|
>
|
|
<div class="flex w-full items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-sm font-semibold text-[var(--wire-color-text-muted)]">{label}</p>
|
|
<p class="mt-2 text-3xl font-bold tracking-tight text-[var(--wire-color-text)]" class:text-4xl='size === "lg"'>
|
|
<span>{prefix}</span><span>{value}</span><span>{suffix}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{#if icon}
|
|
<span
|
|
class="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
|
|
class:bg-[var(--wire-color-success-soft)]='color === "success"'
|
|
class:text-[var(--wire-color-success)]='color === "success"'
|
|
class:bg-[var(--wire-color-warning-soft)]='color === "warning"'
|
|
class:text-[var(--wire-color-warning-text)]='color === "warning"'
|
|
class:bg-[var(--wire-color-danger-soft)]='color === "danger"'
|
|
class:text-[var(--wire-color-danger)]='color === "danger"'
|
|
class:bg-[var(--wire-color-info-soft)]='color === "info"'
|
|
class:text-[var(--wire-color-info)]='color === "info"'
|
|
>
|
|
<span class='{icon + " size-5"}' aria-hidden="true"></span>
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if description}
|
|
<p class="mt-3 text-sm leading-6 text-[var(--wire-color-text-muted)]">{description}</p>
|
|
{/if}
|
|
|
|
{#if trend || trendLabel}
|
|
<div class="mt-4 inline-flex items-center gap-2 text-sm font-semibold">
|
|
<span
|
|
class="inline-flex items-center gap-1 rounded-full px-2.5 py-1"
|
|
class:bg-[var(--wire-color-success-soft)]='trendDirection === "up" || trendDirection === "positive"'
|
|
class:text-[var(--wire-color-success)]='trendDirection === "up" || trendDirection === "positive"'
|
|
class:bg-[var(--wire-color-danger-soft)]='trendDirection === "down" || trendDirection === "negative"'
|
|
class:text-[var(--wire-color-danger)]='trendDirection === "down" || trendDirection === "negative"'
|
|
class:bg-[var(--wire-color-surface-soft)]='trendDirection === "neutral"'
|
|
class:text-[var(--wire-color-text-muted)]='trendDirection === "neutral"'
|
|
>
|
|
{#if trendDirection === "up" || trendDirection === "positive"}
|
|
<span class="icon-[lucide--trending-up] size-4" aria-hidden="true"></span>
|
|
{:else if trendDirection === "down" || trendDirection === "negative"}
|
|
<span class="icon-[lucide--trending-down] size-4" aria-hidden="true"></span>
|
|
{:else}
|
|
<span class="icon-[lucide--minus] size-4" aria-hidden="true"></span>
|
|
{/if}
|
|
<span>{trend}</span>
|
|
</span>
|
|
{#if trendLabel}
|
|
<span class="text-[var(--wire-color-text-muted)]">{trendLabel}</span>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if href}
|
|
<TextLink
|
|
label='{actionLabel || "View details"}'
|
|
href='{href}'
|
|
color='{color}'
|
|
size="sm"
|
|
class="mt-5"
|
|
/>
|
|
{/if}
|
|
</article>
|
|
}
|
|
}
|