miguel
be8f207ecd
- Added event creation page with form handling and validation. - Introduced layout for event management with context provider. - Created event listing page with active and recent events display. - Developed questionnaire creation page linked to events. - Implemented breadcrumb navigation for better user experience. - Added reusable components for event and questionnaire cards. - Integrated API calls for fetching and managing event data. - Enhanced slugify utility for better URL handling. - Established context for managing event state across components.
69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import ClientCarousel from '@/client-components/client-carousel';
|
|
import FormularioCardUser from '@/components/formulario/formulario-card-user';
|
|
import { useGetApi } from '@/hooks/use-get-api';
|
|
import { GetEvento, GetEventoWithCuestionariosWithCupos } from '@/types/evento';
|
|
import React from 'react';
|
|
|
|
export default function Page() {
|
|
const { loading, data } = useGetApi<GetEventoWithCuestionariosWithCupos[]>(
|
|
'/evento/activos/cuestionarios'
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<div className="mx-auto mb-5 mt-3 fade-in-down-bounce">
|
|
<ClientCarousel
|
|
images={
|
|
data
|
|
? data.map((evento) => ({
|
|
src: `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`,
|
|
alt: `Banner de ${evento.nombre_evento}`,
|
|
}))
|
|
: [
|
|
{
|
|
src: '/banner.jpeg',
|
|
alt: 'Banner de eventos activos',
|
|
},
|
|
]
|
|
}
|
|
/>
|
|
</div>
|
|
{loading && <div>Cargando...</div>}
|
|
{data && (
|
|
<div className="row">
|
|
{data.flatMap((evento) =>
|
|
evento.cuestionarios.map((cuestionario, index) => {
|
|
const eventoData: GetEvento = {
|
|
id_evento: evento.id_evento,
|
|
nombre_evento: evento.nombre_evento,
|
|
descripcion_evento: evento.descripcion_evento,
|
|
tipo_evento: evento.tipo_evento,
|
|
fecha_inicio: evento.fecha_inicio,
|
|
fecha_fin: evento.fecha_fin,
|
|
asistencias: evento.asistencias,
|
|
banner: evento.banner,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`col-md-6 col-lg-4 my-3 fade-in-up-bounce delay-${
|
|
(index % 5) + 1
|
|
}`}
|
|
key={`${evento.id_evento}-${cuestionario.id_cuestionario}`}
|
|
>
|
|
<FormularioCardUser
|
|
evento={eventoData}
|
|
formulario={cuestionario}
|
|
/>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|