// components.jsx — shared atoms, icons, nav, header // ── Icons ───────────────────────────────────────────────────── const Icon = { home: (s=22, c="currentColor") => ( ), cart: (s=22, c="currentColor") => ( ), bolt: (s=24, c="currentColor") => ( ), briefcase: (s=22, c="currentColor") => ( ), user: (s=22, c="currentColor") => ( ), bell: (s=20, c="currentColor") => ( ), search: (s=18, c="currentColor") => ( ), chev: (s=16, c="currentColor", dir='right') => { const r = { right: 0, left: 180, up: -90, down: 90 }[dir]; return ( ); }, plus: (s=20, c="currentColor") => ( ), star: (s=14, c="currentColor", filled=true) => ( ), pin: (s=16, c="currentColor") => ( ), clock: (s=14, c="currentColor") => ( ), filter: (s=18, c="currentColor") => ( ), msg: (s=22, c="currentColor") => ( ), share: (s=18, c="currentColor") => ( ), heart: (s=18, c="currentColor", filled=false) => ( ), lock: (s=14, c="currentColor") => ( ), globe: (s=18, c="currentColor") => ( ), check: (s=16, c="currentColor") => ( ), x: (s=18, c="currentColor") => ( ), cal: (s=18, c="currentColor") => ( ), pool: (s=18, c="currentColor") => ( ), crown: (s=14, c="currentColor") => ( ), shield: (s=14, c="currentColor") => ( ), dog: (s=16, c="currentColor") => ( ), key: (s=16, c="currentColor") => ( ), more: (s=18, c="currentColor") => ( ), arrow: (s=18, c="currentColor") => ( ), }; // ── Avatar (deterministic color from initials) ──────────────── function Avatar({ name="?", size=40, src }) { const initials = name.split(' ').slice(0,2).map(p => p[0]).join('').toUpperCase(); const hue = [...name].reduce((a,c)=>a+c.charCodeAt(0),0) % 360; return (
{initials}
); } // ── Star rating ─────────────────────────────────────────────── function Stars({ rating=5, size=12 }) { const full = Math.floor(rating); return ( {[0,1,2,3,4].map(i => ( {Icon.star(size, i < full ? "currentColor" : "oklch(0.85 0.04 80)", true)} ))} ); } // ── Reputation badge (based on completed jobs) ─────────────── function ReputationBadge({ jobs=0, lang='en', size='sm' }) { const levels = [ { min:0, label:{en:'Rookie', pt:'Iniciante', es:'Novato'} }, { min:25, label:{en:'Reliable', pt:'Confiável', es:'Confiable'} }, { min:76, label:{en:'Expert', pt:'Especialista', es:'Experto'} }, { min:151, label:{en:'Master', pt:'Mestre', es:'Maestro'} }, { min:301, label:{en:'Elite', pt:'Elite', es:'Elite'} }, ]; const palette = [ { color:'oklch(0.52 0.13 80)', bg:'oklch(0.95 0.05 80)' }, { color:'oklch(0.48 0.14 210)', bg:'oklch(0.94 0.04 210)' }, { color:'oklch(0.44 0.17 245)', bg:'oklch(0.93 0.06 245)' }, { color:'oklch(0.42 0.17 178)', bg:'oklch(0.93 0.06 178)' }, { color:'oklch(0.42 0.19 310)', bg:'oklch(0.94 0.07 310)' }, ]; const idx = levels.reduce((best, lv, i) => (jobs >= lv.min ? i : best), 0); const { color, bg } = palette[idx]; const lbl = tr(levels[idx].label, lang); const isLg = size === 'lg'; return ( {isLg && {'⭐'}} {lbl.toUpperCase()} ); } // ── Scroll lock (prevents background scroll while any sheet is open) ── let _sheetDepth = 0; function _lockScreen() { _sheetDepth++; const el = document.querySelector('[data-pg-screen]'); if (el) el.style.overflow = 'hidden'; } function _unlockScreen() { _sheetDepth = Math.max(0, _sheetDepth - 1); if (_sheetDepth === 0) { const el = document.querySelector('[data-pg-screen]'); if (el) el.style.overflow = ''; } } // ── Bottom Sheet ────────────────────────────────────────────── function Sheet({ open, onClose, children, height='auto' }) { const [mounted, setMounted] = React.useState(open); const [closing, setClosing] = React.useState(false); const lockedRef = React.useRef(false); React.useEffect(() => { if (open) { setMounted(true); setClosing(false); if (!lockedRef.current) { lockedRef.current = true; _lockScreen(); } } else if (mounted) { setClosing(true); const t = setTimeout(() => { setMounted(false); setClosing(false); if (lockedRef.current) { lockedRef.current = false; _unlockScreen(); } }, 260); return () => clearTimeout(t); } }, [open]); // eslint-disable-line react-hooks/exhaustive-deps // Safety: unlock if component unmounts while still locked React.useEffect(() => { return () => { if (lockedRef.current) { lockedRef.current = false; _unlockScreen(); } }; }, []); // eslint-disable-line react-hooks/exhaustive-deps if (!mounted) return null; return ( <>
e.stopPropagation()} onTouchMove={e => e.stopPropagation()} />
e.stopPropagation()} >
{children}
); } // ── Top App Header (for screens) ────────────────────────────── function TopBar({ title, left, right, subtitle }) { return (
{left}
{title}
{subtitle &&
{subtitle}
}
{right}
); } function IconButton({ children, onClick, badge, dark=false }) { return ( ); } // ── Tab bar (5 tabs, center elevated) ───────────────────────── function TabBar({ tab, setTab, lang='en' }) { const t = STRINGS[lang]; const tabs = [ { id:'home', label:t.home, icon:Icon.home }, { id:'market', label:t.marketplace, icon:Icon.cart }, { id:'quick', label:t.quickPools, icon:Icon.bolt, center:true }, { id:'work', label:t.work, icon:Icon.briefcase }, { id:'profile',label:t.profile, icon:Icon.user }, ]; return (
{tabs.map(tb => { const on = tb.id === tab; if (tb.center) { return ( ); } return ( ); })}
); } // ── Language selector pill ──────────────────────────────────── function LangPill({ lang, setLang, onDark=false }) { const flags = { en:'EN', pt:'PT', es:'ES' }; const next = { en:'pt', pt:'es', es:'en' }; return ( ); } // Simple shimmer line function Shimmer({ w=80, h=10 }) { return
; } Object.assign(window, { Icon, Avatar, Stars, ReputationBadge, Sheet, TopBar, IconButton, TabBar, LangPill, Shimmer, _lockScreen, _unlockScreen });