1 files changed, 26 insertions, 0 deletions
diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte
new file mode 100644
index 0000000..babcbfa
--- /dev/null
+++ b/src/lib/components/StatusBadge.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import {
+		STATUS_LABELS,
+		type RoutineStatus,
+	} from '$lib/shared/routine-metrics';
+
+	let {
+		status,
+		overdueDays = 0,
+	}: { status: RoutineStatus; overdueDays?: number } = $props();
+
+	const className = $derived(
+		status === 'ok'
+			? 'status bg-success text-white'
+			: status === 'due'
+				? 'status bg-accent-soft text-accent'
+				: status === 'late'
+					? 'status bg-accent text-white'
+					: 'status bg-danger text-white',
+	);
+</script>
+
+<span class={className}>
+	{STATUS_LABELS[status]}{#if overdueDays > 0}
+		({overdueDays} j){/if}
+</span>