src/lib/components/StatusBadge.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


<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',
	);

	const icon = $derived(
		status === 'ok' ? '✓' : status === 'due' ? '◷' : status === 'late' ? '!' : '‼',
	);

	const label = $derived(
		overdueDays > 0
			? `${STATUS_LABELS[status]} (${overdueDays} j)`
			: STATUS_LABELS[status],
	);
</script>

<span class={className} role="img" aria-label={label} title={label}>{icon}</span>