themes-scifi-clean/mission_stat.templ
Alex Dunmow 96b87b3e81 initial: theme plugin scifi-clean
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously
an unversioned directory inside ~/src/blockninja-themes/scifi-clean.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-06 14:11:43 +08:00

36 lines
1.2 KiB
Plaintext

package main
// missionStatComponent renders the headline metric card with mono numerals
// and an accent-colored delta arrow.
templ missionStatComponent(data MissionStatData) {
<div data-block="scifi-clean:mission_stat" class="hairline p-6 bg-card text-card-foreground">
if data.Metric != "" {
<div class="scifi-mono uppercase text-xs tracking-widest text-muted-foreground mb-3">
{ data.Metric }
</div>
}
<div class="flex items-baseline gap-2">
<span
class="scifi-mono text-5xl font-medium tabular-nums text-foreground"
style="font-family: var(--font-mono); font-variant-numeric: tabular-nums;"
>
if data.Value == "" {
{ "—" }
} else {
{ data.Value }
}
</span>
if data.Unit != "" {
<span class="scifi-mono text-base text-muted-foreground tabular-nums" style="font-family: var(--font-mono); font-variant-numeric: tabular-nums;">
{ data.Unit }
</span>
}
</div>
if data.Delta != "" {
<div class="mt-3 scifi-mono text-sm tabular-nums" style={ "font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: hsl(var(--accent));" }>
{ trendGlyph(data.Trend) } { data.Delta }
</div>
}
</div>
}