En esta clase, trabajamos en el diseño y funcionalidad de un menú de notificaciones utilizando Tailwind CSS. Exploramos la creación de pestañas y botones, el diseño responsivo y algunas interacciones dinámicas básicas.

Estructura del Menú

El menú de notificaciones consta de las siguientes secciones principales:

1. Encabezado del Menú
   Incluye:

   • Un título con dos opciones: "Notificaciones" y "Configuración".
   • Diferenciación visual entre ambas opciones mediante tamaños de texto y estilos.

2. Pestañas

   • Dos pestañas principales: "Instructor" y "Estudiantes".
   • Cambios de estilo para indicar cuál pestaña está activa, utilizando propiedades como font-medium y border-b-2.

3. Lista de Notificaciones

   • Cada notificación incluye una imagen (representando al remitente o contenido), un título breve y un texto secundario (por ejemplo, "Hace un día").
   • Uso de clases como flex, gap-4, y rounded-full para una distribución visual clara y coherente.

4. Acciones Generales

   • Botones como "Marcar todo como leído" y "Ver todo".
   • Estilizados con clases de borde (border), relleno (padding) y tipografía (font-semibold).

Clases y Estilos Utilizados

Para mantener consistencia visual y funcionalidad, se utilizaron las siguientes clases de Tailwind CSS:

• Tipografía:
  text-lg, font-medium, text-gray-600 para los elementos de texto principales.
  Cambios en hover (hover:text-primary) para una interacción clara.

• Espaciado y Dimensiones:

  • p-4 para el relleno interno de secciones.
  • w-400 o w-450 para ajustar el ancho del contenedor del menú.
  • gap-4 en elementos flexibles para mantener una separación adecuada entre los componentes.

• Bordes:

  • border-b-2 y border-gray-300 para las separaciones y las pestañas.
  • rounded-full para imágenes y botones circulares.

• Colores y Hover:

  • Utilización de colores predefinidos como gray-600 y primary para resaltar elementos interactivos.
  • Cambios visuales en hover, como el sombreado de pestañas o enlaces.

Interactividad con Alpine.js

Para manejar el estado de las pestañas y mostrar el contenido adecuado, se utilizó Alpine.js. La lógica principal incluye:

1. Estados Dinámicos:
   Se utilizó x-data para definir un estado inicial que controla qué pestaña está activa.

   x-data="{ activeTab: 1 }"
   

2. Visibilidad Condicional:

• x-show para alternar la visibilidad de las pestañas.
• Comparación del estado activo con la pestaña correspondiente.

3. Clases Dinámicas:

Aplicación condicional de clases con :class, permitiendo estilos específicos según la pestaña activa.

<div :class="activeTab === 1 ? 'border-primary' : 'border-transparent'"></div>

4. Eventos:

Uso de @click para actualizar el estado de la pestaña activa al seleccionarla.

<button @click="activeTab = 1">Instructor</button>

Conclusión

El menú de notificaciones combina técnicas de diseño moderno con Tailwind CSS y la interactividad proporcionada por Alpine.js. Este enfoque permite un diseño limpio, funcional y fácilmente adaptable para proyectos web. En las próximas clases, trabajaremos en implementar la funcionalidad completa del menú y optimizar su experiencia de usuario.