30 lines
1.3 KiB
Plaintext
30 lines
1.3 KiB
Plaintext
component MetricGrid {
|
|
props {
|
|
label = "Platform metrics"
|
|
metrics = []
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<section class="px-4 sm:px-6 lg:px-8 {class}" aria-label="{label}">
|
|
<div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
|
{#each metrics as metric}
|
|
<article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))]">
|
|
<strong class="text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">
|
|
{metric.value}
|
|
</strong>
|
|
<span class="mt-4 font-semibold text-[var(--wire-color-text,#0f172a)]">{metric.label}</span>
|
|
{#if metric.description}
|
|
<p class="mt-2 text-sm leading-6 text-[var(--wire-color-muted,#64748b)]">{metric.description}</p>
|
|
{/if}
|
|
</article>
|
|
{:empty}
|
|
<p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-muted,#64748b)]">
|
|
No metrics available.
|
|
</p>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
}
|
|
}
|