From 6be16012d97c50b11d26747facaadb0b857132e2 Mon Sep 17 00:00:00 2001
From: lmatos <lmatos@gomezleemarketing.com>
Date: Thu, 7 May 2026 18:46:28 +0000
Subject: [PATCH] Subir archivos a "components"

---
 components/Layout.tsx | 103 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 components/Layout.tsx

diff --git a/components/Layout.tsx b/components/Layout.tsx
new file mode 100644
index 0000000..13a0fb2
--- /dev/null
+++ b/components/Layout.tsx
@@ -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>
+  );
+}