Delete directory 'components'
This commit is contained in:
@@ -1,103 +0,0 @@
|
|||||||
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