Spaces:
Paused
Paused
| 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> | |
| ); | |
| } | |