Spaces:
Running
Running
File size: 2,000 Bytes
d789176 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | class StatCard extends HTMLElement {
static get observedAttributes() {
return ['icon', 'label', 'value', 'color'];
}
constructor() {
super();
}
connectedCallback() {
this.render();
}
attributeChangedCallback() {
this.render();
}
render() {
const icon = this.getAttribute('icon') || 'activity';
const label = this.getAttribute('label') || 'Label';
const value = this.getAttribute('value') || '0';
const color = this.getAttribute('color') || 'primary';
const colorClasses = {
primary: 'text-primary-400 bg-primary-500/10 border-primary-500/20',
secondary: 'text-secondary-400 bg-secondary-500/10 border-secondary-500/20',
green: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
red: 'text-red-400 bg-red-500/10 border-red-500/20',
slate: 'text-slate-400 bg-slate-500/10 border-slate-500/20'
};
const colorClass = colorClasses[color] || colorClasses.primary;
this.innerHTML = `
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-lg backdrop-blur-sm hover:border-slate-700 transition-colors">
<div class="flex items-start justify-between">
<div>
<p class="text-slate-500 text-xs font-medium uppercase tracking-wider mb-1">${label}</p>
<h4 class="text-2xl font-bold text-slate-100">${value}</h4>
</div>
<div class="w-10 h-10 rounded-xl ${colorClass} flex items-center justify-center border">
<i data-feather="${icon}" class="w-5 h-5"></i>
</div>
</div>
</div>
`;
// Re-initialize feather icons for this component
if (window.feather) {
feather.replace();
}
}
}
customElements.define('stat-card', StatCard); |