mirror of
https://github.com/lukaszraczylo/git-velocity.git
synced 2026-06-17 03:38:28 +00:00
30 lines
1.1 KiB
Vue
30 lines
1.1 KiB
Vue
<script setup>
|
|
import Card from './Card.vue'
|
|
import { formatNumber } from '../composables/formatters'
|
|
|
|
defineProps({
|
|
value: { type: [Number, String], required: true },
|
|
label: { type: String, required: true },
|
|
icon: { type: String, default: '' },
|
|
iconColor: { type: String, default: 'text-gray-500' },
|
|
valueClass: { type: String, default: 'bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent' },
|
|
delay: { type: String, default: '0s' }
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="animate-[fadeInUp_0.6s_ease-out]" :style="{ animationDelay: delay }">
|
|
<div class="flex items-center justify-between">
|
|
<div class="min-w-0 flex-1">
|
|
<div class="text-xl sm:text-2xl md:text-3xl font-bold truncate" :class="valueClass">
|
|
{{ typeof value === 'number' ? formatNumber(value) : value }}
|
|
</div>
|
|
<div class="text-xs sm:text-sm text-gray-400 mt-1 truncate">{{ label }}</div>
|
|
</div>
|
|
<div v-if="icon" class="text-2xl sm:text-3xl opacity-50 ml-2 flex-shrink-0" :class="iconColor">
|
|
<i :class="icon"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|