pet_data/app/components/pixel/RetroCounter.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>