File size: 1,316 Bytes
619120c | 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 | import React from 'react';
const Badge = ({ status, text }) => {
const getStatusColor = (s) => {
switch (s?.toLowerCase()) {
case 'online': return 'var(--status-online)';
case 'offline': return 'var(--status-offline)';
case 'roaming': return 'var(--status-roaming)';
case '5g': return 'var(--primary)';
case '4g lte': return '#a855f7';
default: return 'var(--text-muted)';
}
};
const color = getStatusColor(status);
return (
<span style={{
display: 'inline-flex',
alignItems: 'center',
gap: '6px',
padding: '4px 10px',
borderRadius: '20px',
background: `color-mix(in srgb, ${color} 15%, transparent)`,
color: color,
fontSize: '0.75rem',
fontWeight: 600,
border: `1px solid color-mix(in srgb, ${color} 30%, transparent)`
}}>
<span style={{
width: '6px',
height: '6px',
borderRadius: '50%',
backgroundColor: color,
boxShadow: `0 0 5px ${color}`
}} />
{text || status}
</span>
);
};
export default Badge;
|