mirror of
https://github.com/khoaliber/dockhand.git
synced 2026-03-07 21:29:06 +00:00
28 lines
908 B
Svelte
28 lines
908 B
Svelte
<script lang="ts">
|
|
import {
|
|
AlertTriangle,
|
|
RefreshCw,
|
|
CircleCheck
|
|
} from 'lucide-svelte';
|
|
|
|
interface Props {
|
|
unhealthy: number;
|
|
restarting: number;
|
|
}
|
|
|
|
let { unhealthy, restarting }: Props = $props();
|
|
</script>
|
|
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded-md {unhealthy > 0 ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400' : restarting > 0 ? 'bg-red-500/10 text-red-600 dark:text-red-400' : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'}">
|
|
{#if unhealthy > 0}
|
|
<AlertTriangle class="w-3.5 h-3.5" />
|
|
<span class="text-xs font-medium truncate">{unhealthy} unhealthy</span>
|
|
{:else if restarting > 0}
|
|
<RefreshCw class="w-3.5 h-3.5 animate-spin" />
|
|
<span class="text-xs font-medium truncate">{restarting} restarting</span>
|
|
{:else}
|
|
<CircleCheck class="w-3.5 h-3.5" />
|
|
<span class="text-xs font-medium truncate">All containers healthy</span>
|
|
{/if}
|
|
</div>
|