Preparación Legislativas Nacionales 2025

Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx

@@ -0,0 +1,55 @@
+// 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>
+  );
+};