Subir archivos a "components"
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user