diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselProvincialWidget.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselProvincialWidget.tsx index 3c10ca5..9b2ee78 100644 --- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselProvincialWidget.tsx +++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselProvincialWidget.tsx @@ -2,7 +2,7 @@ import { useState, useMemo, useEffect } from 'react'; import { useQuery } from '@tanstack/react-query'; -import Select, { type SingleValue } from 'react-select'; +import Select, { type SingleValue, type StylesConfig } from 'react-select'; import { getHomeResumen, getProvincias } from '../../../apiService'; import type { CatalogoItem } from '../../../types/types'; import { ImageWithFallback } from '../../../components/common/ImageWithFallback'; @@ -30,6 +30,13 @@ interface OptionType { const PROVINCIAS_QUE_RENUEVAN_SENADORES = new Set(['01', '06', '08', '15', '16', '17', '22', '24']); const CATEGORIA_SENADORES = 2; +const customSelectStyles: StylesConfig = { + menuList: (provided) => ({ + ...provided, + maxHeight: '180px', + }), +}; + 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) => { @@ -48,7 +55,7 @@ const formatDateTime = (dateString: string | undefined | null) => { }; export const HomeCarouselProvincialWidget = ({ eleccionId, categoriaId, titulo }: Props) => { - const [selectedProvince, setSelectedProvince] = useState(null); + const [selectedProvince, setSelectedProvince] = useState({ value: '01', label: 'Capital Federal' }); const { data: provincias = [], isLoading: isLoadingProvincias } = useQuery({ queryKey: ['provincias'], @@ -57,7 +64,6 @@ export const HomeCarouselProvincialWidget = ({ eleccionId, categoriaId, titulo } const provinceOptions: OptionType[] = useMemo(() => { const allOptions = provincias.map(p => ({ value: p.id, label: p.nombre })); - if (Number(categoriaId) === CATEGORIA_SENADORES) { return allOptions.filter(opt => PROVINCIAS_QUE_RENUEVAN_SENADORES.has(opt.value)); } @@ -101,6 +107,7 @@ export const HomeCarouselProvincialWidget = ({ eleccionId, categoriaId, titulo } isLoading={isLoadingProvincias} isSearchable={true} placeholder="Seleccionar provincia..." + styles={customSelectStyles} />