Consult AS Technology
d59c8c0d7e
Headers sticky con marca y acciones, contenedores max-w-[1280px], grids de contenido con rails laterales sticky (cotizador, mi-dia, detalle de cobranza), stepper vertical en el wizard de alta, toolbar+ tabla unificadas en cobranza, tabs como segmented control en dashboards, chat con barra de entrada fija y preguntas sugeridas, landing con navbar + hero + grid de modulos + footer.
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { getSesion } from '../services/auth'
|
|
|
|
/** Barra superior: marca a la izquierda, estado de sesión y acceso a configuración a la derecha */
|
|
export function Navbar() {
|
|
const [conSesion, setConSesion] = useState(() => getSesion() !== null)
|
|
|
|
useEffect(() => {
|
|
const actualizar = () => setConSesion(getSesion() !== null)
|
|
window.addEventListener('frasa:sesion', actualizar)
|
|
window.addEventListener('storage', actualizar)
|
|
return () => {
|
|
window.removeEventListener('frasa:sesion', actualizar)
|
|
window.removeEventListener('storage', actualizar)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur">
|
|
<div className="mx-auto flex h-14 max-w-[1280px] items-center justify-between px-6">
|
|
<span className="text-base font-semibold tracking-tight text-[#111827]">
|
|
FRASA<span className="text-accent">.</span>
|
|
</span>
|
|
<div className="flex items-center gap-4">
|
|
<span
|
|
className={`hidden items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium sm:inline-flex ${
|
|
conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B]'
|
|
}`}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className={`h-1.5 w-1.5 rounded-full ${conSesion ? 'bg-green-500' : 'bg-[#94A3B8]'}`}
|
|
/>
|
|
{conSesion ? 'Sesión activa' : 'Sin sesión'}
|
|
</span>
|
|
<a
|
|
href="#configuracion"
|
|
className="text-sm font-medium text-[#64748B] transition-colors hover:text-accent"
|
|
>
|
|
Configuración
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|