Creación de la componente Card Evento para todos los usuarios

[Pillin]

Contexto:

Se necesita una componente que permita a los usuarios visualizar la información esencial de un evento en un formato conciso y atractivo. Esta componente será esencial para la navegación y la experiencia del usuario en la plataforma.

Descripción:

Desarrollar la componente "Card Event" con la siguiente información:

Características

• Título del evento: Máximo de 50 caracteres.
• Descripción del evento: Máximo de 120 caracteres.
• Fecha del evento: Formato DD/MM/AAAA.
• Hora del evento con timezone: Formato HH:MM AM/PM - GMT+X.
• Dirección del evento: Texto con la dirección completa.
• Cantidad de personas en el evento: Número que indica los asistentes o inscritos.
• Opción Editar el evento: Botón o ícono visible solo para los admin de esa comunidad y superadmin.
• Foto del evento: Imagen representativa del evento.

Acciones:

• Click en "Editar el evento": Redirige a la vista de edición de evento.
• Click en la card: Redirige a la vista del detalle del evento.

Acceptance Criteria:

• La componente debe recibir como props la información del evento.
• La componente debe mostrar toda la información mencionada en la descripción de manera clara y ordenada.
• La opción "Editar el evento" solo debe ser visible para los roles de admin de la comunidad correspondiente y superadmin.
• La card debe ser responsiva y adaptarse a diferentes dispositivos y tamaños de pantalla.
• La componente Event debe adaptarse a Dark/Light Mode
• Se deben implementar validaciones para asegurar que el título y la descripción no excedan los límites de caracteres establecidos.
• Al hacer click en las acciones correspondientes, el usuario debe ser redirigido a las vistas adecuadas. Rutas que serán pasadas como parámetros.

Links

Figma

Imágenes

PD: Sólo desarrollar la componente card