Spaces:
Paused
Paused
File size: 2,496 Bytes
c62de68 | 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 72 73 74 75 76 77 78 79 80 | import React from 'react';
import { useAuth } from '../context/AuthContext';
import { LogOut, Wallet, UserCheck, Menu } from 'lucide-react';
export default function Header() {
const { user, logout } = useAuth();
return (
<header style={{
background: '#ffffff',
borderBottom: '1px solid #e2e8f0',
position: 'sticky',
top: 0,
zIndex: 100,
height: '60px'
}}>
<div style={{
maxWidth: '100%',
padding: '0 1.5rem',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}>
{/* Brand Logo & Menu icon matching original website header */}
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<span style={{ fontSize: '1.2rem', fontWeight: '700', color: '#00a8ff' }}>
Mi Empresa
</span>
<Menu size={20} color="#64748b" style={{ cursor: 'pointer' }} />
</div>
{/* User Profile matching exact screenshot badge */}
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
<div style={{
width: '34px',
height: '34px',
borderRadius: '50%',
background: '#00a8ff',
color: '#ffffff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontWeight: '700',
fontSize: '0.85rem'
}}>
P
</div>
<div style={{ textAlign: 'right' }}>
<p style={{ fontSize: '0.75rem', fontWeight: '800', color: '#334155', textTransform: 'uppercase' }}>
PATRICIA FERNANDEZ CUEVAS
</p>
<p style={{ fontSize: '0.65rem', color: '#94a3b8', textTransform: 'uppercase', fontWeight: 'bold' }}>
ADMINISTRADOR
</p>
</div>
</div>
<button
onClick={logout}
style={{
background: 'none',
border: 'none',
color: '#94a3b8',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
padding: '0.4rem'
}}
title="Cerrar Sesión"
>
<LogOut size={18} />
</button>
</div>
</div>
</header>
);
}
|