Sidebar - Copy this React, Tailwind Component to your project

Cuando presiones en la barra lateral en Settings, el diseño debe ocupar una pantalla completa con las siguientes características: 1. Header Superior: • Coloca un header en la parte superior de la pantalla que abarque toda el ancho. • Este header debe incluir: • Un botón de retroceso en la parte izquierda para volver a la pantalla anterior. • El título “Settings” centrado en texto grande y claro. • Un diseño moderno con un fondo blanco, un borde inferior gris sutil y sombras ligeras. • Asegúrate de que el header permanezca fijo al desplazarse por la página. 2. Secciones Organizadas: Divide el contenido en secciones con navegación clara. Cada sección debe tener un diseño limpio, utilizando todo el espacio de la pantalla. Organiza las secciones como sigue: • Perfil del Espacio: • Permitir cambiar el avatar con una opción para restablecerlo al valor predeterminado. • Agregar campos para editar el nombre y descripción del espacio. • Incluir la fecha de creación como información adicional. • Miembros del Equipo: • Mostrar una lista de miembros con columnas para: Nombre, Rol, Estado y opciones de configuración rápidas (como remover o editar roles). • Agregar un botón destacado para invitar nuevos miembros. • La tabla debe ser responsiva y con bordes redondeados. • Suscripciones: • Mostrar el estado actual de la suscripción (Activo/Inactivo), el precio del plan y la próxima fecha de renovación. • Incluir botones para modificar la suscripción o contactar soporte técnico. • Utilizar etiquetas coloridas (verde para activo, rojo para inactivo). • Configuración General: • Ofrecer opciones para cambiar el idioma del sistema. • Permitir habilitar/deshabilitar la autenticación en dos pasos (2FA). • Agregar opciones de seguridad para restablecer contraseñas. • Mostrar un registro de auditoría (Audit Log) con acciones recientes. 3. Diseño e Interactividad: • Todas las secciones deben ocupar el ancho completo de la pantalla para facilitar la navegación en dispositivos de cualquier tamaño. • Agregar animaciones suaves: • Efectos de fade-in al cargar las secciones. • Efectos hover para los botones. • Utilizar colores vibrantes con degradados sutiles para destacar elementos interactivos. • El diseño debe ser completamente responsivo, asegurando que se vea y funcione bien en dispositivos móviles y pantallas grandes. 4. Fluidez y Experiencia del Usuario: • Asegúrate de que el cambio entre las secciones sea suave, utilizando transiciones como deslizamiento o desvanecimiento. • Al volver atrás desde cualquier sección, el header debe permanecer visible y funcional. Este diseño hará que la configuración no solo sea funcional, sino también intuitiva y visualmente atractiva, aprovechando toda la pantalla para maximizar la experiencia del usuario.