dmolinari/Elecciones-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Fix Widgets Carousel

Browse Source
This commit is contained in:
dmolinari
2025-10-18 10:51:51 -03:00
parent ae846f2d48
commit 17a5b333fd
4 changed files with 58 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx
View File

@@ -1,4 +1,5 @@
// src/features/legislativas/nacionales/HomeCarouselWidget.tsx
import { useQuery } from '@tanstack/react-query';
import { getHomeResumen } from '../../../apiService';
import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
@@ -21,7 +22,6 @@ interface Props {
const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
const formatNumber = (num: number) => num.toLocaleString('es-AR');
const formatDateTime = (dateString: string | undefined | null) => {
if (!dateString) return '...';
try {
@@ -41,6 +41,10 @@ const formatDateTime = (dateString: string | undefined | null) => {
};
export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo }: Props) => {
const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
const prevButtonClass = `prev-${uniqueId}`;
const nextButtonClass = `next-${uniqueId}`;
const { data, isLoading, error } = useQuery({
queryKey: ['homeResumen', eleccionId, distritoId, categoriaId],
queryFn: () => getHomeResumen(eleccionId, distritoId, categoriaId),
@@ -81,8 +85,8 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
spaceBetween={16}
slidesPerView={1.3}
navigation={{
prevEl: `.${styles.navButtonPrev}`,
nextEl: `.${styles.navButtonNext}`,
prevEl: `.${prevButtonClass}`,
nextEl: `.${nextButtonClass}`,
}}
breakpoints={{
320: { slidesPerView: 1.25, spaceBetween: 10 },
@@ -95,7 +99,6 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
{data.resultados.map(candidato => (
<SwiperSlide key={candidato.agrupacionId}>
<div className={styles.candidateCard} style={{ '--candidate-color': candidato.color || '#ccc' } as React.CSSProperties}>
<div className={styles.candidatePhotoWrapper}>
<ImageWithFallback
src={candidato.fotoUrl ?? undefined}
@@ -104,22 +107,15 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
className={styles.candidatePhoto}
/>
</div>
<div className={styles.candidateDetails}>
<div className={styles.candidateInfo}>
{candidato.nombreCandidato ? (
<>
<span className={styles.candidateName}>
{candidato.nombreCandidato}
</span>
<span className={styles.partyName}>
{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
</span>
<span className={styles.candidateName}>{candidato.nombreCandidato}</span>
<span className={styles.partyName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
</>
) : (
<span className={styles.candidateName}>
{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
</span>
<span className={styles.candidateName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
)}
</div>
<div className={styles.candidateResults}>
@@ -127,14 +123,13 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
<span className={styles.votes}>{formatNumber(candidato.votos)} votos</span>
</div>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
<div className={`${styles.navButton} ${styles.navButtonPrev}`}></div>
<div className={`${styles.navButton} ${styles.navButtonNext}`}></div>
<div className={`${styles.navButton} ${styles.navButtonPrev} ${prevButtonClass}`}></div>
<div className={`${styles.navButton} ${styles.navButtonNext} ${nextButtonClass}`}></div>
</div>
<div className={styles.widgetFooter}>