// Shared UI primitives for Reale 2027 app.
// Tipo-escudo: renderiza el badge oficial si existe, si no, monograma de placeholder.
// El monograma también aparece como fallback si la imagen falla al cargar.
function Crest({ team, size = 52 }) {
const t = (window.TEAMS || {})[team] || { mono: team, primary: '#333', accent: '#fff' };
const [imgErr, setImgErr] = React.useState(false);
const hasBadge = t.badge && !imgErr;
if (hasBadge) {
return (
setImgErr(true)}
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block' }}
/>
);
}
const fs = size * 0.28;
return (
{t.mono}
);
}
function shade(hex, pct) {
const n = parseInt(hex.slice(1), 16);
let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
r = Math.max(0, Math.min(255, Math.round(r + (r * pct) / 100)));
g = Math.max(0, Math.min(255, Math.round(g + (g * pct) / 100)));
b = Math.max(0, Math.min(255, Math.round(b + (b * pct) / 100)));
return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}
// Mini crest para tabla de posiciones — img si hay badge, si no monograma.
function MiniCrest({ team, size = 22 }) {
const t = (window.TEAMS || {})[team] || { mono: team, primary: '#333', accent: '#fff' };
const [imgErr, setImgErr] = React.useState(false);
if (t.badge && !imgErr) {
return (
setImgErr(true)}
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block' }}
/>
);
}
return (
{t.mono.slice(0, 3)}
);
}
// Footer con redes sociales
function SocialFooter() {
const color = '#0A2B63';
const items = [
{
name: 'Instagram',
href: 'https://www.instagram.com/jorgeareale/',
svg: (
),
},
{
name: 'TikTok',
href: 'https://www.tiktok.com/@jorgerealeoficial',
svg: (
),
},
{
name: 'YouTube',
href: 'https://www.youtube.com/@jorgereale2027',
svg: (
),
},
];
return (
Seguinos
Jorge Reale · #DaleBoca
);
}
function TeamPhotoBanner() {
// Foto real del plantel. Si el archivo no existe, cae al placeholder vectorial.
const [failed, setFailed] = React.useState(false);
const src = 'assets/boca-team.jpg';
if (!failed) {
return (
setFailed(true)}
style={{
width: '100%', height: '100%', objectFit: 'cover',
display: 'block',
}}
/>
);
}
// Fallback: placeholder vectorial (si falta assets/boca-team.jpg)
return (
);
}
function NextMatchCard({ match, onClick }) {
const home = window.TEAMS[match.home];
const away = window.TEAMS[match.away];
return (
{match.comp}
{match.phase}{match.fase ? ` · ${match.fase}` : ''}
{home.name.split(' ').map((w, i) =>
{w}
)}
VS
{away.name.split(' ').map((w, i) =>
{w}
)}
{match.date} · {match.time} hs
{match.venue}
);
}
// Row de partido para Fixture / Resultados — copia exacta de la referencia
function MatchRow({ match, score, onClick }) {
const home = window.TEAMS[match.home];
const away = window.TEAMS[match.away];
// En la referencia, todos los partidos muestran el mismo header.
// Lo replicamos textualmente.
const compLine = 'COPA DE LA LIGA PROFESIONAL';
const phaseLine = '1st Phase - Semi Final';
const dateLine = match.dateLong || `${match.date}${match.time ? ` - ${match.time} HS` : ''}`;
const venueLine = match.venue || 'Estadio Mario Alberto Kempes';
return (
{/* Escudo izq + nombre */}
{(home.name).split(' ').map((w, i) =>
{w}
)}
{/* Centro */}
{compLine}
{phaseLine}
{score ? (
{score.h}
VS
{score.a}
) : (
VS
)}
{dateLine}
{venueLine}
{/* Escudo der + nombre */}
{(away.name).split(' ').map((w, i) =>
{w}
)}
);
}
// Pequeño placeholder para fotos de jugador — avatar monograma azul/dorado
// Si recibe `photo` URL (de la API), la renderiza con fallback al monograma.
function PlayerAvatar({ name, size = 32, photo }) {
const initials = (name || '').split(' ').map(w => w[0] || '').join('').slice(0, 2).toUpperCase();
const [failed, setFailed] = React.useState(false);
const shared = {
width: size, height: size, borderRadius: '50%',
flexShrink: 0,
boxShadow: 'inset 0 -2px 4px rgba(0,0,0,0.25), 0 0 0 1.5px #F5B01E',
};
if (photo && !failed) {
return (
{initials}
);
}
// Card genérica de noticia (list item)
function NewsCard({ item, onClick, compact = false }) {
return (
{item.title}
{item.excerpt}
{item.time}
);
}
Object.assign(window, { Crest, MiniCrest, NextMatchCard, MatchRow, PlayerAvatar, NewsCard, TeamPhotoBanner, SocialFooter, shade });