React: Proyecto: galería de imágenes con React

Desarrolla una galería de imágenes interactiva con React que incluya cuadrícula, filtrado y previsualización.

1. Datos de la galería

Define un array de objetos que representen las imágenes. Cada objeto debe tener al menos las propiedades id (string único), titulo (string), url (string con la URL de la imagen), categoria (string) y opcionalmente descripcion (string).

Puedes usar imágenes de placeholder como https://picsum.photos/seed/{id}/400/300 o cualquier conjunto de URLs de imágenes.

Define al menos ocho imágenes repartidas en al menos tres categorías distintas (por ejemplo: "Oficinas", "Eventos corporativos", "Equipos y tecnología").

2. Componente principal (App)

Crea el componente App que gestione el estado global de la galería:

• Define un estado categoriaActiva con useState inicializado a "Todas" o null para mostrar todas las imágenes.
• Define un estado imagenSeleccionada con useState inicializado a null para controlar la imagen mostrada en el modal.
• Filtra el array de imágenes según la categoría activa antes de pasarlo al componente de cuadrícula.
• Renderiza los botones de filtro (uno por cada categoría más un botón "Todas"), el componente Cuadricula y el componente Modal (solo si hay una imagen seleccionada).

3. Botones de filtro

Crea una sección con botones para cada categoría:

• Extrae las categorías únicas del array de imágenes.
• Añade un botón "Todas" que muestre todas las imágenes.
• Al pulsar un botón, actualiza categoriaActiva en el estado.
• Aplica un estilo visual diferente al botón de la categoría activa (por ejemplo, color de fondo destacado o borde).

4. Componente Cuadricula

Crea un componente Cuadricula que reciba el array de imágenes filtradas y la función para seleccionar una imagen:

• Renderiza las imágenes en un layout de cuadrícula usando CSS Grid (display: grid, grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))) o Flexbox con flex-wrap.
• Cada imagen se muestra dentro de un contenedor con un título superpuesto o debajo de la imagen.
• Al hacer clic en una imagen, llama a la función recibida por props para establecer imagenSeleccionada.
• Usa key={imagen.id} al renderizar la lista (nunca el índice del map).

5. Componente Modal

Crea un componente Modal que reciba la imagen seleccionada y una función para cerrar el modal:

• Muestra la imagen ampliada con su título y descripción (si existe).
• Incluye un botón de cierre o permite cerrar al hacer clic fuera de la imagen (en el fondo oscuro).
• Aplica un fondo semitransparente oscuro (background: rgba(0, 0, 0, 0.7)) con posición fija que cubra toda la pantalla.

6. Estilos

• Aplica estilos para que la cuadrícula sea responsive y las imágenes se adapten al ancho disponible.
• Las imágenes deben tener un tamaño uniforme con object-fit: cover para evitar distorsión.
• Añade un efecto :hover o de opacidad al pasar el cursor sobre las imágenes de la cuadrícula.
• Puedes usar estilos inline, un archivo CSS importado o CSS modules.