src/lib/components/ScoreBadge.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


<script lang="ts">
	let { score }: { score: number } = $props();

	const level = $derived(score >= 80 ? 'high' : score >= 50 ? 'mid' : 'low');
</script>

<span class="score {level}">{score}</span>

<style>
	.score {
		flex-shrink: 0;
		min-width: 2.75rem;
		padding: 0.25rem 0.5rem;
		text-align: center;
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--white);
	}

	.high {
		background: var(--success);
	}

	.mid {
		background: var(--warn);
	}

	.low {
		background: var(--danger);
	}
</style>