Dashboard Trello 04 - (OPCIONAL) Mostrar Datos de Amanecer/Atardecer en el Dashboard

[Yeraldsb]

Descripción
Crear un componente SunTimes que muestre las horas de amanecer y atardecer de la ciudad seleccionada en el dashboard.

Dependencia

• Depende de que la API de clima (consumida desde Django REST Framework) devuelva correctamente los datos de amanecer y atardecer.

Prioridad: 2
Dificultad: Baja

Criterios de aceptación

• Mostrar la hora de amanecer y atardecer de forma clara y legible.
• Los datos deben estar correctamente formateados (formato 12h con AM/PM o 24h según configuración).
• El componente debe actualizarse automáticamente cuando se cambie la ciudad seleccionada.

✅ Checklist

• Crear un componente SunTimes en React que reciba los datos de amanecer y atardecer desde la API.
• Mostrar las horas de amanecer y atardecer con formato adecuado.
• Asegurarse de que el componente sea responsivo y se ajuste bien en pantallas pequeñas y grandes.
• Probar con diferentes ciudades para verificar que los tiempos se actualicen correctamente.

---

📚 Recursos Extras

🔗 Backend (Django + DRF)

• Django REST Framework: Serializers — Para incluir campos de amanecer/atardecer en la respuesta de la API.
• Django REST Framework: Views — Cómo exponer los datos de clima (incluyendo amanecer/atardecer) en un endpoint.

🎨 Frontend (React + Vite)

• React Docs: Passing Props — Para enviar los datos de amanecer/atardecer al componente SunTimes.
• Intl.DateTimeFormat (MDN) — API nativa de JavaScript para formatear horas en 12h o 24h.
• date-fns — Librería ligera para manipulación y formateo de fechas/horas en React.
• Tailwind CSS Responsive Design — Para asegurar que el componente se vea bien en pantallas pequeñas y grandes.

⚡ Infraestructura

• pnpm Docs — Para instalar librerías de frontend como date-fns de manera rápida y eficiente.