23 lines
808 B
Vue
23 lines
808 B
Vue
<script setup>
|
|
defineProps({
|
|
label: String,
|
|
value: [Number, String],
|
|
color: { type: String, default: 'blue' },
|
|
icon: { type: String, default: 'chart' },
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500">{{ label }}</p>
|
|
<p class="mt-1 text-3xl font-bold text-gray-900">{{ value }}</p>
|
|
</div>
|
|
<div :class="['flex h-12 w-12 items-center justify-center rounded-xl', `bg-${color}-100`]">
|
|
<span :class="[`text-${color}-600`, 'text-xl font-bold']">{{ typeof value === 'number' ? '#' : '•' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|