responsive-system 1.4.3 → 1.4.7

package/src/components/layout/Footer.tsx

@@ -1,42 +1,11 @@
-import { useResponsiveLayout } from '../../hooks'
-
 const Footer = () => {
-  const { breakpoint } = useResponsiveLayout()
-  
   return (
     <footer className="bg-gray-900 border-t border-gray-800">
       <div className="px-4 py-6">
-        <div className="max-w-7xl mx-auto">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div>
-              <h3 className="text-white font-semibold mb-2">Tu Aplicación</h3>
-              <p className="text-gray-400 text-sm">
-                Descripción de tu aplicación aquí.
-              </p>
-            </div>
-            
-            <div>
-              <h3 className="text-white font-semibold mb-2">Enlaces</h3>
-              <ul className="space-y-1 text-gray-400 text-sm">
-                <li><a href="#" className="hover:text-white">Inicio</a></li>
-                <li><a href="#" className="hover:text-white">Acerca</a></li>
-                <li><a href="#" className="hover:text-white">Contacto</a></li>
-              </ul>
-            </div>
-            
-            <div>
-              <h3 className="text-white font-semibold mb-2">Info</h3>
-              <p className="text-gray-400 text-xs">
-                Breakpoint: <span className="text-blue-400">{breakpoint.toUpperCase()}</span>
-              </p>
-            </div>
-          </div>
-          
-          <div className="border-t border-gray-800 mt-6 pt-4 text-center">
-            <p className="text-gray-500 text-xs">
-              © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.
-            </p>
-          </div>
+        <div className="max-w-7xl mx-auto text-center">
+          <p className="text-gray-400 text-sm">
+            © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.
+          </p>
         </div>
       </div>
     </footer>

package/src/components/layout/Navigation.tsx

@@ -8,7 +8,7 @@ const Navigation = () => {
       <div className="px-4 py-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-3">
-            <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
+            <div className="w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center">
               <span className="text-white font-bold text-sm">LO</span>
             </div>
             <h1 className="text-white font-semibold text-lg">Tu Aplicación</h1>

package/src/components/layout/Sidebar.tsx

@@ -13,7 +13,6 @@ const Sidebar = () => {
   
   return (
     <>
-      {/* Hamburger button para móvil */}
       {isMobile && (
         <button
           onClick={() => setSidebarOpen(true)}
@@ -25,11 +24,10 @@ const Sidebar = () => {
         </button>
       )}
 
-      {/* Sidebar desktop */}
       <aside className={`bg-gray-900 border-r border-gray-800 ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'} ${isTablet ? 'w-56' : 'w-64'}`}>
         <div className="p-6 flex flex-col h-full">
           <div className="flex items-center space-x-3 mb-8">
-            <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
+            <div className="w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center">
               <span className="text-white font-bold text-sm">LO</span>
             </div>
             <span className="text-white font-bold text-lg">Tu Aplicación</span>
@@ -48,13 +46,12 @@ const Sidebar = () => {
         </div>
       </aside>
 
-      {/* Sidebar móvil desplegable */}
       {isMobile && sidebarOpen && (
         <div className="fixed inset-0 z-40 bg-black/50" onClick={() => setSidebarOpen(false)}>
           <div className="fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800">
             <div className="p-6 flex flex-col h-full pt-20">
               <div className="flex items-center space-x-3 mb-8">
-                <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
+                <div className="w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center">
                   <span className="text-white font-bold text-sm">LO</span>
                 </div>
                 <span className="text-white font-bold text-lg">Tu Aplicación</span>

package/src/providers/ResponsiveLayoutProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { ResponsiveProvider } from './index'
 import { useResponsive } from '../hooks'
 import { ResponsiveLayoutContext } from '../context'
@@ -32,7 +32,12 @@ const ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps
   const customResponsive = useResponsiveHook?.()
   const responsive = customResponsive || internalResponsive
   
-  const [currentLayout, setCurrentLayout] = useState(defaultLayout)
+  const [currentLayout, setCurrentLayout] = useState(() => defaultLayout)
+  
+  // Asegurar que el layout se inicialice correctamente con el defaultLayout
+  useEffect(() => {
+    setCurrentLayout(defaultLayout)
+  }, [defaultLayout])
   
   const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]