31 lines
855 B
Vue
31 lines
855 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
label: string;
|
|
count: number;
|
|
icon: string;
|
|
tone: 'primary' | 'success' | 'danger' | 'info';
|
|
}>();
|
|
|
|
const TONES: Record<string, string> = {
|
|
primary: 'text-primary-600',
|
|
success: 'text-green-600',
|
|
danger: 'text-red-600',
|
|
info: 'text-sky-500',
|
|
};
|
|
|
|
const formatted = computed(() => new Intl.NumberFormat().format(props.count));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-full items-center justify-between rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
|
|
<i :class="[icon, TONES[tone]]" class="text-4xl" />
|
|
|
|
<div class="text-right">
|
|
<h2 class="text-3xl font-semibold text-slate-800">{{ formatted }}</h2>
|
|
<div class="text-slate-500">{{ label }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|