src/lib/components/MoneyText.svelte

<script lang="ts">
	import { formatCents } from '$lib/domain/money';

	let {
		cents,
		currency,
		signed = false,
		class: className = ''
	}: { cents: number; currency: string; signed?: boolean; class?: string } = $props();

	const text = $derived(
		signed && cents > 0 ? `+${formatCents(cents, currency)}` : formatCents(cents, currency)
	);
	const tone = $derived(
		!signed ? '' : cents > 0 ? 'text-green-700' : cents < 0 ? 'text-red-700' : 'text-gray-500'
	);
</script>

<span class="tabular-nums {tone} {className}">{text}</span>