55 lines
2.5 KiB
TypeScript
55 lines
2.5 KiB
TypeScript
|
// src/features/legislativas/nacionales/components/PanelResultados.tsx
|
||
|
|
import type { ResultadoTicker, EstadoRecuentoTicker } from '../../../../types/types';
|
||
|
|
import { ImageWithFallback } from '../../../../components/common/ImageWithFallback';
|
||
|
|
import { assetBaseUrl } from '../../../../apiService';
|
||
|
|
import { AnimatedNumber } from './AnimatedNumber';
|
||
|
|
|
||
|
|
const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
|
||
|
|
const formatVotes = (num: number) => Math.round(num).toLocaleString('es-AR');
|
||
|
|
|
||
|
|
interface PanelResultadosProps {
|
||
|
|
resultados: ResultadoTicker[];
|
||
|
|
estadoRecuento: EstadoRecuentoTicker;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosProps) => {
|
||
|
|
return (
|
||
|
|
<div className="panel-resultados">
|
||
|
|
<div className="panel-partidos-container">
|
||
|
|
{resultados.map(partido => (
|
||
|
|
<div key={partido.id} className="partido-fila">
|
||
|
|
<div className="partido-logo">
|
||
|
|
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={partido.nombre} />
|
||
|
|
</div>
|
||
|
|
<div className="partido-info-wrapper">
|
||
|
|
<span className="partido-nombre">{partido.nombreCorto || partido.nombre}</span>
|
||
|
|
{partido.nombreCandidato && <span className="candidato-nombre">{partido.nombreCandidato}</span>}
|
||
|
|
<div className="partido-barra-background">
|
||
|
|
<div className="partido-barra-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="partido-stats">
|
||
|
|
<span className="partido-porcentaje">
|
||
|
|
<AnimatedNumber value={partido.porcentaje} formatter={formatPercent} />
|
||
|
|
</span>
|
||
|
|
<span className="partido-votos">
|
||
|
|
<AnimatedNumber value={partido.votos} formatter={formatVotes} /> votos
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="panel-estado-recuento">
|
||
|
|
<div className="estado-item">
|
||
|
|
<span>Participación</span>
|
||
|
|
<strong><AnimatedNumber value={estadoRecuento.participacionPorcentaje} formatter={formatPercent} /></strong>
|
||
|
|
</div>
|
||
|
|
<div className="estado-item">
|
||
|
|
<span>Mesas Escrutadas</span>
|
||
|
|
<strong><AnimatedNumber value={estadoRecuento.mesasTotalizadasPorcentaje} formatter={formatPercent} /></strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|