51 lines
1.7 KiB
Svelte
51 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import i18n from '$lib/i18n'
|
|
|
|
let props: {
|
|
title: string
|
|
icon: string
|
|
value: number
|
|
previousValue: number
|
|
unit?: string
|
|
} = $props()
|
|
|
|
let diff = $derived(
|
|
Math.round(((props.previousValue - props.value) / props.previousValue) * 100 * 10 * -1) / 10
|
|
)
|
|
</script>
|
|
|
|
<div class="card bg-base-100 shadow rounded-md basis-0 grow">
|
|
<div class="card-body gap-2">
|
|
<div class="flex items-start justify-between gap-2 text-sm">
|
|
<div>
|
|
<p class="text-base-content/80 font-medium">
|
|
{props.title}
|
|
</p>
|
|
<div class="mt-3 flex items-center gap-2">
|
|
<p class="text-2xl font-semibold">
|
|
{props.value}{#if props.unit}{' ' + props.unit}{/if}
|
|
</p>
|
|
{#if !Number.isNaN(diff)}
|
|
{#if diff > 0}
|
|
<div class="badge badge-outline badge-success badge-sm gap-0.5 px-1 font-medium">
|
|
<i class="bi bi-arrow-up-right"></i>{diff}%
|
|
</div>
|
|
{:else if diff < 0}
|
|
<div class="badge badge-outline badge-error badge-sm gap-0.5 px-1 font-medium">
|
|
<i class="bi bi-arrow-down-right"></i>{diff}%
|
|
</div>
|
|
{:else}
|
|
<div class="badge badge-outline badge-warning badge-sm gap-0.5 px-1 font-medium">
|
|
<i class="bi bi-arrow-right"></i>{diff}%
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<i class="bi {props.icon} text-primary text-4xl"></i>
|
|
</div>
|
|
<p class="text-base-content/60 text-sm">
|
|
{$i18n.t('dashboard:cards.lastMonth', { val: props.previousValue, unit: props.unit })}
|
|
</p>
|
|
</div>
|
|
</div>
|