41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
label: { type: String, required: true },
|
|
value: { type: String, required: true },
|
|
trend: { type: String, default: '' },
|
|
hint: { type: String, default: '' },
|
|
// null = neutral, true = good direction, false = bad direction
|
|
trendGood: { type: Boolean, default: null },
|
|
});
|
|
|
|
const trendClass = computed(() => {
|
|
if (props.trendGood === null) return 'text-n-slate-11';
|
|
return props.trendGood ? 'text-n-teal-11' : 'text-n-ruby-11';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-3 p-5 group bg-n-solid-1">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="text-sm font-medium text-n-slate-11">{{ label }}</span>
|
|
<span
|
|
v-if="hint"
|
|
v-tooltip="hint"
|
|
class="transition-opacity opacity-0 cursor-help i-lucide-info size-3.5 text-n-slate-10 group-hover:opacity-100"
|
|
/>
|
|
</div>
|
|
<div class="flex items-end justify-between gap-2">
|
|
<span
|
|
class="text-3xl font-semibold tracking-tight tabular-nums text-n-slate-12"
|
|
>
|
|
{{ value }}
|
|
</span>
|
|
<span class="text-sm font-medium tabular-nums" :class="trendClass">
|
|
{{ trend }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|