File size: 4,537 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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import React from 'react';
import Badge from '../UI/Badge';
import { Signal, SignalHigh, SignalMedium, SignalLow } from 'lucide-react';
const UserTable = ({ users }) => {
const getSignalIcon = (strength) => {
if (strength >= 4) return <SignalHigh size={16} color="var(--status-online)" />;
if (strength === 3) return <SignalMedium size={16} color="var(--status-roaming)" />;
return <SignalLow size={16} color="var(--status-offline)" />;
};
return (
<div className="glass-panel" style={{ marginTop: 'var(--space-lg)', overflow: 'hidden' }}>
<div style={{ padding: 'var(--space-md)', borderBottom: '1px solid var(--border-color)', display: 'flex', justifyContent: 'space-between' }}>
<h3 style={{ fontSize: '1.125rem' }}>Active Subscribers</h3>
<button style={{ background: 'transparent', border: '1px solid var(--border-color)', color: 'var(--text-muted)', padding: '4px 12px', borderRadius: '4px', cursor: 'pointer' }}>Filter</button>
</div>
<div style={{ overflowX: 'auto' }}>
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
<thead>
<tr style={{ textAlign: 'left', color: 'var(--text-muted)', borderBottom: '1px solid var(--border-color)' }}>
<th style={{ padding: 'var(--space-md)' }}>ID</th>
<th style={{ padding: 'var(--space-md)' }}>Subscriber</th>
<th style={{ padding: 'var(--space-md)' }}>Connection</th>
<th style={{ padding: 'var(--space-md)' }}>Signal</th>
<th style={{ padding: 'var(--space-md)' }}>Location</th>
<th style={{ padding: 'var(--space-md)' }}>Status</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.02)', transition: 'background 0.2s' }}
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
<td style={{ padding: 'var(--space-md)', fontFamily: 'monospace', color: 'var(--primary)' }}>{user.id}</td>
<td style={{ padding: 'var(--space-md)' }}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<span style={{ fontWeight: 500 }}>{user.name}</span>
<span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{user.phoneNumber}</span>
</div>
</td>
<td style={{ padding: 'var(--space-md)' }}>
<Badge status={user.connectionType} text={user.connectionType} />
</td>
<td style={{ padding: 'var(--space-md)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
{getSignalIcon(user.signalStrength)}
<span style={{ color: 'var(--text-muted)' }}>{user.signalStrength}/5</span>
</div>
</td>
<td style={{ padding: 'var(--space-md)' }}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<span>{user.location.city}</span>
<span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{user.location.country}</span>
</div>
</td>
<td style={{ padding: 'var(--space-md)' }}>
<Badge status={user.status} />
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default UserTable;
|