diff options
Diffstat (limited to 'src/lib/components/ScoreBadge.svelte')
| -rw-r--r-- | src/lib/components/ScoreBadge.svelte | 35 |
1 files changed, 27 insertions, 8 deletions
diff --git a/src/lib/components/ScoreBadge.svelte b/src/lib/components/ScoreBadge.svelte index 6384667..ae11918 100644 --- a/src/lib/components/ScoreBadge.svelte +++ b/src/lib/components/ScoreBadge.svelte @@ -1,13 +1,32 @@ <script lang="ts"> let { score }: { score: number } = $props(); - const className = $derived( - score >= 80 - ? 'score bg-success' - : score >= 50 - ? 'score bg-accent' - : 'score bg-danger', - ); + const level = $derived(score >= 80 ? 'high' : score >= 50 ? 'mid' : 'low'); </script> -<span class={className}>{score}</span> +<span class="score {level}">{score}</span> + +<style> + .score { + flex-shrink: 0; + min-width: 2.75rem; + padding: 0.25rem 0.5rem; + border-radius: 9999px; + text-align: center; + font-size: 0.875rem; + font-weight: 700; + color: var(--white); + } + + .high { + background: var(--success); + } + + .mid { + background: var(--accent); + } + + .low { + background: var(--danger); + } +</style> |