File size: 2,600 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 | import React from 'react';
import { Bell, Search, Activity } from 'lucide-react';
const Header = () => {
return (
<header style={{
height: '80px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 var(--space-md)',
marginTop: 'var(--space-md)'
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)', flex: 1 }}>
<div className="glass-panel" style={{
display: 'flex',
alignItems: 'center',
padding: 'var(--space-sm) var(--space-md)',
gap: 'var(--space-sm)',
width: '300px'
}}>
<Search size={18} color="var(--text-muted)" />
<input
type="text"
placeholder="Search by IMSI, Number, or Location..."
style={{
background: 'transparent',
border: 'none',
color: 'var(--text-main)',
outline: 'none',
width: '100%'
}}
/>
</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-lg)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)', color: 'var(--text-muted)', fontSize: '0.875rem' }}>
<Activity size={16} color="var(--status-online)" />
<span>Network Load: <strong style={{ color: 'var(--text-main)' }}>42%</strong></span>
</div>
<button style={{
background: 'transparent',
border: 'none',
color: 'var(--text-main)',
cursor: 'pointer',
position: 'relative'
}}>
<Bell size={20} />
<span style={{
position: 'absolute',
top: -2,
right: -2,
width: '8px',
height: '8px',
background: 'var(--accent)',
borderRadius: '50%'
}} />
</button>
</div>
</header>
);
};
export default Header;
|