lmatos/promomundial-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Subir archivos a "components"

Browse Source
This commit is contained in:
lmatos
2026-05-07 18:46:28 +00:00
parent 2c39cc5a99
commit 6be16012d9
1 changed files with 103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Layout.tsx
+103
View File
@@ -0,0 +1,103 @@
import { Menu, X, Facebook, Instagram, Linkedin } from 'lucide-react';
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
export default function Layout({ children }: { children: React.ReactNode }) {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const { user, signOut } = useAuth();
const navigate = useNavigate();
const handleSignOut = async () => {
await signOut();
setIsMenuOpen(false);
navigate('/');
};
return (
<div className="flex flex-col min-h-screen bg-white">
{/* HEADER */}
<header className="bg-brand-blue text-white shadow-md relative z-50">
<div className="container mx-auto px-4 h-20 flex items-center justify-between">
{/* Logos */}
<Link to="/" className="flex items-center gap-4" onClick={() => setIsMenuOpen(false)}>
<img src={`${import.meta.env.BASE_URL}images/logo-nestle.png`} alt="Nestlé" className="h-10 auto object-contain" />
<img src={`${import.meta.env.BASE_URL}images/logo-maggi.png`} alt="Maggi" className="h-10 auto object-contain" />
</Link>
<button
className="md:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
{/* Desktop Nav */}
<nav className="hidden md:flex items-center gap-6 font-bold text-sm">
<Link to="/" className="hover:text-brand-yellow transition-colors">Inicio</Link>
{user ? (
<>
<Link to="/dashboard" className="hover:text-brand-yellow transition-colors">Mi cuenta</Link>
<Link to="/upload" className="hover:text-brand-yellow transition-colors">Registrar factura</Link>
<button onClick={handleSignOut} className="bg-white/10 hover:bg-white/20 px-4 py-2 rounded-full transition-colors">Cerrar Sesión</button>
</>
) : (
<>
<Link to="/upload" className="hover:text-brand-yellow transition-colors">Registrar factura</Link>
<Link to="/auth" className="bg-brand-yellow text-brand-blue px-6 py-2 rounded-full hover:bg-brand-yellow/90 transition-colors shadow-md">Iniciar sesión</Link>
<Link to="/auth" className="border border-white px-6 py-2 rounded-full hover:bg-white/10 transition-colors">Registrarte</Link>
</>
)}
</nav>
</div>
</header>
{/* Mobile Menu Overlay */}
{isMenuOpen && (
<div className="md:hidden fixed inset-0 top-20 z-40 bg-brand-blue/95 backdrop-blur-xl flex flex-col p-6 animate-in fade-in slide-in-from-top-4 duration-200">
<nav className="flex flex-col gap-6 text-xl font-bold text-center mt-8 text-white">
<Link to="/" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Inicio</Link>
{user ? (
<>
<Link to="/dashboard" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Mi cuenta</Link>
<Link to="/upload" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Registrar factura</Link>
<button onClick={handleSignOut} className="text-white hover:text-brand-yellow transition-colors">Cerrar Sesión</button>
</>
) : (
<>
<Link to="/upload" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Registrar factura</Link>
<Link to="/auth" onClick={() => setIsMenuOpen(false)} className="hover:text-brand-yellow transition-colors">Iniciar sesión / Registro</Link>
</>
)}
</nav>
</div>
)}
{/* MAIN CONTENT */}
<main className="flex-1 flex flex-col relative w-full overflow-hidden">
{children}
</main>
{/* FOOTER */}
<footer className="bg-brand-blue text-white py-6 mt-auto">
<div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-4">
{/* Footer Logos */}
<div className="flex items-center gap-4">
<img src={`${import.meta.env.BASE_URL}images/logo-nestle.png`} alt="Nestlé" className="h-8 auto object-contain" />
<img src={`${import.meta.env.BASE_URL}images/logo-maggi.png`} alt="Maggi" className="h-8 auto object-contain" />
</div>
<div className="text-xs md:text-sm text-center font-medium">
<Link to="#" className="hover:underline">Términos y condiciones</Link>
</div>
<div className="flex items-center gap-4">
<a href="#" className="hover:text-brand-yellow transition-colors"><Facebook size={24} fill="currentColor" /></a>
<a href="#" className="hover:text-brand-yellow transition-colors"><Instagram size={24} /></a>
<a href="#" className="hover:text-brand-yellow transition-colors"><Linkedin size={24} fill="currentColor" /></a>
</div>
</div>
</footer>
</div>
);
}