50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
name: String,
|
|
value: String,
|
|
color: String,
|
|
icon: String,
|
|
subheader: Object,
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="cell">
|
|
<div class="card h-full">
|
|
<div class="card-content is-flex is-gap-0.5 is-justify-content-space-between">
|
|
<div>
|
|
<p class="fs-14 has-text-grey mb-1">{{ name }}</p>
|
|
<p class="fsb-26 mb-1 has-text-black">{{ value }}</p>
|
|
<div
|
|
v-if="subheader"
|
|
:class="[
|
|
'is-flex is-gap-0.5 is-align-items-center',
|
|
subheader.fluctuation === 'up' ? 'has-text-green-40' : 'has-text-red-40',
|
|
]"
|
|
>
|
|
<Icon
|
|
:name="
|
|
subheader.fluctuation === 'up'
|
|
? 'material-symbols:arrow-upward-rounded'
|
|
: 'material-symbols:arrow-downward-rounded'
|
|
"
|
|
color="inherit"
|
|
/>
|
|
<p class="fs-14">{{ subheader.value }}</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'rounded-lg size-12 is-flex-shrink-0 is-flex is-justify-content-center is-align-items-center',
|
|
`has-background-${color}-soft has-text-${color}-40`,
|
|
]"
|
|
>
|
|
<Icon
|
|
:name="icon"
|
|
:size="28"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|