24 lines
608 B
Plaintext
24 lines
608 B
Plaintext
---
|
|
interface Props {
|
|
icon: string;
|
|
label: string;
|
|
value: string | number;
|
|
color?: 'gold' | 'green' | 'blue' | 'red';
|
|
}
|
|
|
|
const { icon, label, value, color = 'gold' } = Astro.props;
|
|
|
|
const colorClasses = {
|
|
gold: 'text-gold-500',
|
|
green: 'text-green-400',
|
|
blue: 'text-blue-400',
|
|
red: 'text-red-400'
|
|
};
|
|
---
|
|
|
|
<div class="bg-titanium border border-edge-normal rounded-xl p-6 hover:border-gold-500/30 transition-colors">
|
|
<div class="text-4xl mb-3">{icon}</div>
|
|
<div class={`text-3xl font-bold ${colorClasses[color]}`}>{value}</div>
|
|
<div class="text-gray-400 text-sm mt-1">{label}</div>
|
|
</div>
|