src/lib/components/match-table/cells/score-cell.svelte

<script lang="ts">
	interface Props {
		score1: number;
		score2: number;
		winner: 'team1' | 'team2' | '';
	}
	let { score1, score2, winner }: Props = $props();
</script>

<div class="flex items-center justify-center gap-1 font-mono text-sm tabular-nums">
	<span
		data-winner={winner === 'team1'}
		class="text-muted-foreground data-[winner=true]:font-semibold data-[winner=true]:text-primary"
	>
		{score1}
	</span>
	<span class="text-xs text-muted-foreground/40">:</span>
	<span
		data-winner={winner === 'team2'}
		class="text-muted-foreground data-[winner=true]:font-semibold data-[winner=true]:text-primary"
	>
		{score2}
	</span>
</div>