38 lines
1.3 KiB
Vue
38 lines
1.3 KiB
Vue
<script setup>
|
|
defineProps({
|
|
title: String,
|
|
value: [String, Number],
|
|
subValue: String,
|
|
icon: String,
|
|
color: {
|
|
type: String,
|
|
default: 'blue'
|
|
}
|
|
});
|
|
|
|
const colors = {
|
|
blue: 'text-blue-600 bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400',
|
|
red: 'text-red-600 bg-red-100 dark:bg-red-900/30 dark:text-red-400',
|
|
green: 'text-green-600 bg-green-100 dark:bg-green-900/30 dark:text-green-400',
|
|
yellow: 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/30 dark:text-yellow-400',
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<div class="flex items-center">
|
|
<div :class="['p-3 rounded-full', colors[color]]">
|
|
<!-- Simple Circle as Placeholder for Icon -->
|
|
<div class="w-6 h-6 border-2 border-current rounded-full"></div>
|
|
</div>
|
|
<div class="ml-4 text-gray-500 dark:text-gray-400">
|
|
<p class="text-sm font-medium uppercase tracking-wider">{{ title }}</p>
|
|
<div class="flex items-baseline">
|
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ value }}</p>
|
|
<p v-if="subValue" class="ml-2 text-xs font-semibold text-gray-500">{{ subValue }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|