File size: 1,735 Bytes
070478f |
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 56 57 |
class StatusBadge extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
const status = this.getAttribute('status') || '';
const icon = this.getAttribute('icon') || '';
this.shadowRoot.innerHTML = `
<style>
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
}
.approved {
background-color: #ECFDF5;
color: #059669;
}
.pending {
background-color: #FEF3C7;
color: #D97706;
}
.rejected {
background-color: #FEE2E2;
color: #DC2626;
}
.icon {
width: 0.75rem;
height: 0.75rem;
margin-right: 0.25rem;
}
</style>
<span class="badge ${status}">
${icon ? `<i data-feather="${icon}" class="icon"></i>` : ''}
${this.getStatusText(status)}
</span>
`;
}
getStatusText(status) {
switch(status) {
case 'approved': return 'Approved';
case 'pending': return 'Pending';
case 'rejected': return 'Rejected';
default: return status;
}
}
}
customElements.define('status-badge', StatusBadge); |