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

Feat Botón Map URL Parámetro Widget Carousel

Browse Source
This commit is contained in:
dmolinari
2025-10-23 15:34:09 -03:00
parent e98e152f0e
commit 983ed5e39c
4 changed files with 89 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx
View File

@@ -6,6 +6,7 @@ import { ImageWithFallback } from '../../../components/common/ImageWithFallback'
import { assetBaseUrl } from '../../../apiService';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, A11y } from 'swiper/modules';
import { FiMap } from 'react-icons/fi';
// @ts-ignore
import 'swiper/css';
@@ -17,6 +18,7 @@ interface Props {
eleccionId: number;
categoriaId: number;
titulo: string;
mapLinkUrl: string;
}
const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
@@ -39,7 +41,7 @@ const formatDateTime = (dateString: string | undefined | null) => {
}
};
export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }: Props) => {
export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo, mapLinkUrl }: Props) => {
const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
const prevButtonClass = `prev-${uniqueId}`;
const nextButtonClass = `next-${uniqueId}`;
@@ -55,7 +57,13 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
return (
<div className={styles.homeCarouselWidget}>
<h2 className={styles.widgetTitle}>{titulo}</h2>
<div className={styles.widgetHeader}>
<h2 className={styles.widgetTitle}>{titulo}</h2>
<a href={mapLinkUrl} className={styles.mapLinkButton}>
<FiMap />
<span className={styles.buttonText}>Ver Mapa</span>
</a>
</div>
<div className={styles.carouselContainer}>
<Swiper

68
Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.module.css
View File

@@ -30,14 +30,55 @@
position: relative;
}
.widgetHeader {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin: 0 0 0.5rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.widgetTitle {
font-size: 1.2rem;
font-weight: 900;
color: var(--primary-text);
margin: 0 0 0.5rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
margin: 0;
padding: 0;
border: none;
text-align: left;
flex-grow: 1;
}
.mapLinkButton {
display: flex;
align-items: center;
gap: 0.4rem;
background-color: #007bff;
color: white;
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mapLinkButton svg {
font-size: 1rem;
}
.buttonText {
display: inline;
}
.mapLinkButton:hover {
background-color: #0056b3;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.topStatsBar {
@@ -262,7 +303,26 @@
}
@media (max-width: 768px) {
.homeCarouselWidget .widgetTitle { text-align: center; font-size: 1.1rem; }
.homeCarouselWidget .widgetHeader {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.homeCarouselWidget .widgetTitle {
text-align: left;
font-size: 1rem;
}
.mapLinkButton {
padding: 0.5rem;
}
.buttonText {
display: none;
}
.homeCarouselWidget .topStatsBar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.2rem; padding: 0.3rem; }
.homeCarouselWidget .topStatsBar > div { padding: 0.25rem 0.5rem; border-right: none; }
.homeCarouselWidget .topStatsBar > div:nth-child(odd) { border-right: 1px solid var(--border-color); }

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

@@ -6,6 +6,7 @@ import { ImageWithFallback } from '../../../components/common/ImageWithFallback'
import { assetBaseUrl } from '../../../apiService';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, A11y } from 'swiper/modules';
import { FiMap } from 'react-icons/fi';
// @ts-ignore
import 'swiper/css';
@@ -18,6 +19,7 @@ interface Props {
distritoId: string;
categoriaId: number;
titulo: string;
mapLinkUrl: string;
}
const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
@@ -40,7 +42,7 @@ const formatDateTime = (dateString: string | undefined | null) => {
}
};
export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo }: Props) => {
export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo, mapLinkUrl }: Props) => {
const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
const prevButtonClass = `prev-${uniqueId}`;
const nextButtonClass = `next-${uniqueId}`;
@@ -56,7 +58,13 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
return (
<div className={styles.homeCarouselWidget}>
<h2 className={styles.widgetTitle}>{titulo}</h2>
<div className={styles.widgetHeader}>
<h2 className={styles.widgetTitle}>{titulo}</h2>
<a href={mapLinkUrl} className={styles.mapLinkButton}>
<FiMap />
<span className={styles.buttonText}>Ver Mapa</span>
</a>
</div>
<div className={styles.carouselContainer}>
<Swiper