38 lines
911 B
Svelte
38 lines
911 B
Svelte
<script lang="ts">
|
|
import type { Health } from '$ui/stores/servers.js';
|
|
interface Props {
|
|
health: Health;
|
|
size?: number;
|
|
label?: string | null;
|
|
}
|
|
let { health, size = 10, label = null }: Props = $props();
|
|
</script>
|
|
|
|
<span
|
|
class="dot dot-{health}"
|
|
style="width:{size}px;height:{size}px"
|
|
aria-label={label ?? `server ${health}`}
|
|
title={label ?? health}
|
|
></span>
|
|
|
|
<style>
|
|
.dot {
|
|
display: inline-block;
|
|
border-radius: 999px;
|
|
vertical-align: middle;
|
|
flex-shrink: 0;
|
|
}
|
|
.dot-online {
|
|
background: var(--spark-500);
|
|
animation: electric-pulse 1.6s ease-in-out infinite;
|
|
}
|
|
.dot-stale, .dot-starting, .dot-provisioning {
|
|
background: var(--amber-500);
|
|
box-shadow: var(--amber-glow);
|
|
}
|
|
.dot-offline {
|
|
background: var(--danger-500);
|
|
opacity: 0.6;
|
|
}
|
|
</style>
|