// Shared chrome: phone screen shell, status bar, bottom tab bar. // All four variants render their content inside so the device // chrome stays consistent and the artboards visually compare apples-to-apples. const PHONE_W = 393; const SAFE_TOP = 47; // status bar const SAFE_BOTTOM = 34; // home indicator function StatusBar({ time = '9:41', dark = false }) { const c = dark ? '#fff' : '#000'; return (
{time}
); } function HomeIndicator({ dark = false }) { return (
); } // Bottom tab bar matching navigation/index.tsx (4 tabs, Tracker active) function TabBar({ active = 'Tracker', tint = RVU.navy }) { const tabs = [ { id: 'Tracker', label: 'My Tracker', icon: 'stats' }, { id: 'CPTLookup', label: 'CPT Lookup', icon: 'search' }, { id: 'Analyze', label: 'Analyze', icon: 'spark' }, { id: 'BillingNews', label: 'Billing News', icon: 'news' }, ]; return (
{tabs.map(t => { const on = t.id === active; const c = on ? tint : RVU.textMuted; return (
{t.label}
); })}
); } function TabIcon({ name, color, filled }) { const s = 24; const sw = filled ? 0 : 1.7; const fill = filled ? color : 'none'; if (name === 'stats') return ( ); if (name === 'search') return ( {filled && } ); if (name === 'spark') return ( ); if (name === 'news') return ( ); return null; } // Phone screen shell — no bezel, just the rounded screen rectangle. // width fixed at 393; height grows with children. function PhoneShell({ children, bg = RVU.bg, dark = false, time = '9:41' }) { return (
{children}
); } // ─ Reusable Ionicons-style glyphs used across variants ────────────────────── const Icon = { share: ({ c = RVU.navy, s = 20 }) => ( ), gear: ({ c = RVU.navy, s = 20 }) => ( ), chevR: ({ c = RVU.textMuted, s = 16 }) => ( ), chevDown: ({ c = RVU.textMuted, s = 14 }) => ( ), flag: ({ c = RVU.navy, s = 18 }) => ( ), info: ({ c = RVU.textMuted, s = 16 }) => ( ), arrowUp: ({ c, s = 12 }) => ( ), arrowDown: ({ c, s = 12 }) => ( ), dot: ({ c = RVU.teal, s = 8 }) => ( ), ellipsis: ({ c = RVU.textMuted, s = 18 }) => ( ), plus: ({ c = '#fff', s = 18 }) => ( ), }; // Mini sparkline SVG — used in multiple variants function Sparkline({ data, w = 80, h = 28, color = RVU.navy, fill = false, dotted = false }) { const max = Math.max(...data, 1); const pts = data.map((v, i) => { const x = (i / (data.length - 1)) * w; const y = h - (v / max) * (h - 4) - 2; return [x, y]; }); const d = pts.map((p, i) => (i === 0 ? `M${p[0]} ${p[1]}` : `L${p[0]} ${p[1]}`)).join(' '); const area = `${d} L${w} ${h} L0 ${h} Z`; return ( {fill && } ); } Object.assign(window, { PhoneShell, StatusBar, HomeIndicator, TabBar, TabIcon, Icon, Sparkline, PHONE_W });