Initial commit

routes/dashboard/dashboard-health-banner.svelte

@@ -0,0 +1,27 @@
+<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>