// Pau Fit — shared components // Icons, tab bar, progress rings, pills // ───────────────────────────────────────────────────────────── // Icons (line style, hairline 1.6) // ───────────────────────────────────────────────────────────── const Icon = { home: (c = '#000', f = false) => , target: (c = '#000', f = false) => , fork: (c = '#000', f = false) => , people: (c = '#000', f = false) => , 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') => }; // ───────────────────────────────────────────────────────────── // 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' }) { 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: 'Retos', icon: Icon.target }, { id: 'recetas', label: 'Comidas', icon: Icon.fork }, { id: 'comunidad', label: 'Comunidad', icon: Icon.people }, { id: 'perfil', label: 'Perfil', icon: Icon.user }]; const inactive = dark ? 'rgba(255,255,255,0.42)' : '#9C928A'; return (
{tabs.map((t) => { const isActive = active === t.id; const c = isActive ? accent : inactive; 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; const items = ['✨', '💗', '🎉', '⭐️', '🌸', '💪🏻', '💖', '✨', '🌟', '💗']; return (
{items.map((e, i) => {e} )}
); } Object.assign(window, { Icon, ProgressRing, Pill, TabBar, RetoBadge, StreakFlame, Confetti, InsigniaCard }); // ───────────────────────────────────────────────────────────── // 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}
); }