25 lines
659 B
Vue
25 lines
659 B
Vue
|
<template>
|
||
|
|
<div class="flex items-center gap-2 bg-[#0f0816] border border-[#4a3b5e] px-2 py-1 rounded-sm">
|
||
|
|
<component :is="icon" :size="14" :style="{ color: color }" />
|
||
|
|
<div class="flex flex-col leading-none">
|
||
|
|
<span v-if="label" class="text-[8px] text-[#8f80a0] uppercase">{{ label }}</span>
|
||
|
|
<span class="font-mono text-sm font-bold text-[#e0d8f0]">{{ value }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { Component } from 'vue';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
icon: Component;
|
||
|
|
value: number | string;
|
||
|
|
label?: string;
|
||
|
|
color?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
withDefaults(defineProps<Props>(), {
|
||
|
|
color: '#e0d8f0'
|
||
|
|
});
|
||
|
|
</script>
|