starcoach-hackathon/zarinpal-analytics-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine KPI currency label

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-08-21 16:11:05 +08:00
parent 4772b043ae
commit 3db3bd18bb
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/KpiCard.svelte
View File

@@ -22,6 +22,9 @@
const iconClass = $derived( const iconClass = $derived(
`size-5 ${tone === 'good' ? 'text-emerald-600' : tone === 'warning' ? 'text-amber-600' : 'text-primary'}`, `size-5 ${tone === 'good' ? 'text-emerald-600' : tone === 'warning' ? 'text-amber-600' : 'text-primary'}`,
); );
const rialSuffix = '\u00a0ریال';
const hasRialSuffix = $derived(value.endsWith(rialSuffix));
const displayValue = $derived(hasRialSuffix ? value.slice(0, -rialSuffix.length) : value);
</script> </script>
<Card class="group rounded-lg shadow-xs transition-transform duration-200 hover:-translate-y-0.5"> <Card class="group rounded-lg shadow-xs transition-transform duration-200 hover:-translate-y-0.5">
@@ -34,7 +37,14 @@
<Icon class={iconClass} strokeWidth={1.8} /> <Icon class={iconClass} strokeWidth={1.8} />
</div> </div>
<p class="text-[clamp(1.25rem,2vw,1.5rem)] font-extrabold tracking-tight whitespace-nowrap tabular-nums"> <p class="text-[clamp(1.25rem,2vw,1.5rem)] font-extrabold tracking-tight whitespace-nowrap tabular-nums">
{#if hasRialSuffix}
<span class="inline-flex items-baseline gap-1" aria-label={value}>
<span aria-hidden="true">{displayValue}</span>
<span class="text-[0.68em] font-bold tracking-normal" aria-hidden="true">ریال</span>
</span>
{:else}
{value} {value}
{/if}
</p> </p>
<p class="text-muted-foreground mt-1.5 text-xs leading-5 sm:mt-2 sm:leading-6">{note}</p> <p class="text-muted-foreground mt-1.5 text-xs leading-5 sm:mt-2 sm:leading-6">{note}</p>
</CardContent> </CardContent>