themes-scifi-clean/status_bar.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

47 lines
1.4 KiB
Plaintext

package main
// statusBarComponent renders the sticky top status rail.
// UAT §13.9 requires position: sticky and top: 0.
templ statusBarComponent(data StatusBarData) {
<div
data-block="scifi-clean:status_bar"
class="w-full hairline-b bg-card text-card-foreground scifi-mono text-xs uppercase tracking-widest"
style="position: sticky; top: 0; z-index: 30;"
>
<div class="max-w-6xl mx-auto px-4 py-2 flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="text-muted-foreground">{ data.Callsign }</span>
<span class="text-muted-foreground">|</span>
<span class="text-foreground">PUBLIC</span>
</div>
<div class="flex items-center gap-3 tabular-nums">
if data.ShowClock {
<span
data-status-bar-clock="utc"
class="text-muted-foreground tabular-nums"
>
{ "00:00:00 UTC" }
</span>
}
if data.ShowBuild {
<span class="text-muted-foreground">|</span>
<span class="text-foreground tabular-nums">BLD a1b2c3</span>
}
</div>
</div>
<script>
(function(){
var el = document.querySelector('[data-status-bar-clock="utc"]');
if (!el) return;
function fmt(n){ return n < 10 ? '0' + n : String(n); }
function tick(){
var d = new Date();
el.textContent = fmt(d.getUTCHours()) + ':' + fmt(d.getUTCMinutes()) + ':' + fmt(d.getUTCSeconds()) + ' UTC';
}
tick();
setInterval(tick, 1000);
})();
</script>
</div>
}