// Pau Fit — shared components // Icons, tab bar, progress rings, pills // ───────────────────────────────────────────────────────────── // Icons (line style, hairline 1.6) // ───────────────────────────────────────────────────────────── const Icon = { // PACK NUEVO inspirado en Silbe: outline limpio inactivo, FILLED sólido cuando activo. // Sin fill parcial — siempre o totalmente fill o totalmente outline. // Cromo de accesos rápidos (DISEÑO.md §4: SVG para navegación, emoji solo en contenido) camera: (c = '#000', size = 22) => ( ), calendarDays: (c = '#000', size = 22) => ( ), trophy: (c = '#000', size = 22) => ( ), home: (c = '#000', f = false) => f ? ( ) : ( ), // RUTINAS — mancuerna (dumbbell) bonita target: (c = '#000', f = false) => f ? ( ) : ( ), // COMIDAS — manzana mordida (más clara que el tenedor) fork: (c = '#000', f = false) => f ? ( ) : ( ), // COMUNIDAD — dos figuras redondeadas people: (c = '#000', f = false) => f ? ( ) : ( ), user: (c = '#000', f = false) => , play: (c = '#fff') => , back: (c = '#000') => , close: (c = '#000') => , heart: (c = '#000', f = false) => , flame: (size = 22, c = '#D14C7A') => , check: (c = '#fff', size = 14) => , lock: (c = '#fff', size = 12) => , diamond: (size = 26, c = '#C9956B') => , search: (c = '#000') => , sort: (c = '#000') => , chevR: (c = '#000', size = 10) => , bell: (c = '#000') => , share: (c = '#000') => , clock: ({ c = '#000', size = 14 } = {}) => , playFilled: ({ c = '#fff', size = 12 } = {}) => , fire: (c = '#FF2E78', size = 14) => }; // ───────────────────────────────────────────────────────────── // Progress Ring (conic gradient) // ───────────────────────────────────────────────────────────── function ProgressRing({ value = 0.4, size = 64, stroke = 6, color = '#D4847A', track = 'rgba(0,0,0,0.06)', children }) { const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const off = c * (1 - value); return (
{children}
); } // ───────────────────────────────────────────────────────────── // Pill (filter chip) // ───────────────────────────────────────────────────────────── function Pill({ active, onClick, children, dark = false, color = '#D4847A' }) { // Anna-style: pill compacta bold, uppercase, mucha personalidad return ( ); } // ───────────────────────────────────────────────────────────── // Tab Bar (5 tabs, blur glass) // ───────────────────────────────────────────────────────────── function TabBar({ active, onChange, dark = false, accent = '#D4847A' }) { const tabs = [ { id: 'home', label: 'Inicio', icon: Icon.home }, { id: 'retos', label: 'Rutinas', icon: Icon.target }, { id: 'recetas', label: 'Comidas', icon: Icon.fork }, { id: 'comunidad', label: 'Comunidad', icon: Icon.people }]; const inactiveColor = dark ? 'rgba(255,255,255,0.55)' : '#A89C94'; // PRO TabBar (Sweat/Silbe style): glass blur + sólido contraste return (
{tabs.map((t) => { const isActive = active === t.id; // Pill activo: background ACCENT con icon en blanco que sí contrasta sobre rosa fuerte // Si el accent es claro pueden contrastar mejor con T.text — pero default Pau peach es contrast OK // iOS-style: sin píldora — el activo se distingue por tinte + relleno const iconColor = isActive ? accent : inactiveColor; return ( ); })}
); } // ───────────────────────────────────────────────────────────── // Badge for reto cards (GRATIS / PRO) // ───────────────────────────────────────────────────────────── function RetoBadge({ tag, dark = false, isPremium = false }) { if (tag === 'GRATIS') { return ( GRATIS); } return ( {!isPremium && {Icon.lock('#F5E6C8', 8)}} PRO ); } // ───────────────────────────────────────────────────────────── // Streak Flame — wobble animation // ───────────────────────────────────────────────────────────── function StreakFlame({ count, color = '#D14C7A' }) { return (
🔥 {count}
); } // ───────────────────────────────────────────────────────────── // Confetti — emoji burst for completion // ───────────────────────────────────────────────────────────── function Confetti({ show }) { if (!show) return null; // Burst real: 24 items con posiciones y rotaciones random // Estilo Sweat/Growingannanas — emoji + papelillos pequeños const emojis = ['✨', '💗', '🎉', '⭐️', '🌸', '💪🏻', '💖', '🌟', '🔥', '💕']; const dots = ['#D9477E', '#F4A8BD', '#FFD166', '#7CD2A0', '#9B7BE5']; const items = Array.from({ length: 24 }, (_, i) => { const isEmoji = i % 3 === 0; const x = 5 + Math.random() * 90; // 5%..95% const yStart = -5 + Math.random() * 35; // -5%..30% const rot = (Math.random() - 0.5) * 720; const scale = 0.7 + Math.random() * 0.7; const dur = 1400 + Math.random() * 800; const delay = Math.random() * 200; return { isEmoji, x, yStart, rot, scale, dur, delay, char: emojis[i % emojis.length], color: dots[i % dots.length], size: 18 + Math.random() * 14 }; }); return (
{items.map((it, i) => ( it.isEmoji ? ( {it.char} ) : ( ) ))}
); } // ───────────────────────────────────────────────────────────── // PauTopBar — header global que aparece en todas las tab screens // Izquierda: pill racha (toca → logros) // Centro: logo Pau Fit // Derecha: avatar circular con iniciales (toca → perfil) // ───────────────────────────────────────────────────────────── // variant: 'home' → ⭐ puntos izq · LOGO centro · avatar der // 'default' → LOGO izq · botones der (rutinas/comidas/comunidad) function PauTopBar({ T, nav, variant = 'default', showSearch, showBookmark, onSearch, onBookmark }) { // Bump para re-render cuando cache cambia (avatar nuevo, etc) const [, setCacheBump] = React.useState(0); React.useEffect(() => { const handler = () => setCacheBump(x => x + 1); window.addEventListener('pau:cache-updated', handler); return () => window.removeEventListener('pau:cache-updated', handler); }, []); const cache = (typeof window !== 'undefined' && window.__pauCache) || {}; const profile = cache.profile || {}; const fullName = profile.full_name || profile.username || ''; // Solo usamos iniciales si tiene nombre/username REAL. // Si solo hay email (ej. "p" de paulasmareyes), mostramos el logo Pau Fit. const initials = fullName ? fullName.split(' ').map(s => s[0]).slice(0,2).join('').toUpperCase() : null; const avatarUrl = profile.avatar_url || null; const points = profile.points || 0; // STICKY + glass al scrollear const [scrolled, setScrolled] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!ref.current) return; let parent = ref.current.parentElement; while (parent && !parent.classList?.contains('scroll-area')) parent = parent.parentElement; if (!parent) return; const onScroll = () => setScrolled(parent.scrollTop > 8); parent.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => parent.removeEventListener('scroll', onScroll); }, []); const isDark = T.dark; const bgScrolled = isDark ? 'rgba(27,22,18,0.82)' : `${T.bg}cc`; // Botón redondeado reusable arriba derecha const RoundBtn = ({ icon, onClick }) => ( ); const avatarBtn = ( ); return (
{variant === 'home' ? ( // HOME: ⭐ puntos izq · LOGO centro (perfectamente centrado) · avatar der
Pau Fit
{avatarBtn}
) : ( // DEFAULT: LOGO izq · botones der
Pau Fit
{showBookmark && ( }/> )} {showSearch && ( }/> )} {avatarBtn}
)}
); } // ───────────────────────────────────────────────────────────── // EmptyState — patrón consistente Sweat/BODi para pantallas vacías // emoji 44–48px + título + descripción + CTA opcional // ───────────────────────────────────────────────────────────── function EmptyState({ emoji = '✨', title, description, ctaLabel, onCta, T }) { return (
{emoji}
{title}
{description && (
{description}
)} {ctaLabel && onCta && ( )}
); } // ───────────────────────────────────────────────────────────── // Skeleton loader — estilo Sweat/BODi // Reemplaza spinners feos por placeholder rectangular con shimmer // ───────────────────────────────────────────────────────────── function Skeleton({ width = '100%', height = 16, radius = 8, style = {} }) { return
; } // PauLoader — loader oficial con logo Pau Fit (pulse + glow accent) function PauLoader({ T, size = 96, label }) { return (
Pau Fit
{label && (
{label}
)}
); } // SkeletonList — render N skeletons en columna (para listas tipo Historial, Ranking) function SkeletonList({ count = 3, height = 64, gap = 10, T }) { return (
{Array.from({ length: count }).map((_, i) => (
))}
); } // ───────────────────────────────────────────────────────────── // WelcomeTutorialModal — primer login, 3 slides estilo onboarding // ───────────────────────────────────────────────────────────── function WelcomeTutorialModal({ T, onDone }) { const [step, setStep] = React.useState(0); const slides = [ { emoji: '💗', title: 'Bienvenida a Pau Fit', desc: 'Tu app fitness con retos guiados, recetas y comunidad' }, { emoji: '🎯', title: 'Elige tu reto', desc: 'Programas de 7 a 30 días para tu objetivo. Solo tienes que seguir' }, { emoji: '⭐', title: 'Gana puntos · sube en el ranking', desc: 'Completa días, sube fotos, anota comidas. Cada acción suma' }, ]; const isLast = step === slides.length - 1; return (
{slides[step].emoji}
{slides[step].title}
{slides[step].desc}
{/* Dots */}
{slides.map((_, i) => (
))}
); } Object.assign(window, { Icon, ProgressRing, Pill, TabBar, RetoBadge, StreakFlame, Confetti, InsigniaCard, EmptyState, Skeleton, SkeletonList, PauTopBar, WelcomeTutorialModal, PauLoader }); // ───────────────────────────────────────────────────────────── // Insignia — badge ganada al completar un reto // Diseño: medalla circular con ring gradient, emoji centro, // multiplicador (x2, x3...) en esquina si times > 1 // ───────────────────────────────────────────────────────────── function InsigniaCard({ b, T, large = false }) { const size = large ? 120 : 88; return (
{/* outer ring (gradient) */}
{/* Inner emoji */} {b.emoji} {/* Sparkles */} ✨ ✨
{/* Multiplier */} {b.times > 1 &&
×{b.times}
}
{b.title}
{b.lastDate}
); }