// components/NewsTicker.jsx // A right-to-left news marquee that sits directly under the top nav, sitewide. // Pulls the latest 5 press releases from /api/news (which proxies the IR RSS // feed) and links each headline out to ir.wrap.com in a new tab. Ends with a // "MORE NEWS" CTA to the full releases page. // // Conventions followed (see CLAUDE.md): // - Babel-in-browser, no build step // - Hooks aliased to avoid CDN-global collisions // - Inline React style objects, design tokens (no hardcoded brand hex) // - Exported on window at the bottom via Object.assign const { useState: useNTState, useEffect: useNTEffect, useRef: useNTRef, } = React; const NEWS_ENDPOINT = '/api/news'; const RELEASES_URL = 'https://ir.wrap.com/news-events/news-releases'; function NewsTicker() { const [items, setItems] = useNTState([]); const [paused, setPaused] = useNTState(false); const [dismissed, setDismissed] = useNTState(false); const mounted = useNTRef(true); const barRef = useNTRef(null); // Publish the ticker's rendered height as --ticker-h on so the fixed // nav (top: var(--ticker-h)) and page content (#root padding) sit below it. // Runs every render (no deps) so it re-measures after items load and after a // dismiss. When the bar isn't rendered — no items, dismissed, or unmounted // (e.g. wraptormx) — barRef is null, --ticker-h becomes 0px, and the nav and // content slide up to reclaim the space automatically. useNTEffect(() => { const root = document.documentElement; const setVar = () => { const h = barRef.current ? barRef.current.offsetHeight : 0; root.style.setProperty('--ticker-h', h ? h + 'px' : '0px'); }; setVar(); window.addEventListener('resize', setVar); return () => { window.removeEventListener('resize', setVar); root.style.setProperty('--ticker-h', '0px'); }; }); useNTEffect(() => { mounted.current = true; fetch(NEWS_ENDPOINT) .then((r) => (r.ok ? r.json() : { items: [] })) .then((data) => { if (mounted.current && data && Array.isArray(data.items)) { setItems(data.items); } }) .catch(() => { /* fail soft: ticker simply doesn't render */ }); return () => { mounted.current = false; }; }, []); // Nothing to show → render nothing (no empty bar, no layout shift beyond this). // Dismissed → same: barRef goes null, --ticker-h drops to 0px, nav/content rise. if (dismissed || !items || items.length === 0) return null; // Respect users who prefer no motion: show a static, scrollable strip. const prefersReducedMotion = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const separator = ( ); const renderItem = (item, i) => ( { e.currentTarget.style.color = 'var(--accent)'; e.currentTarget.style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--text)'; e.currentTarget.style.opacity = '0.92'; }} > {item.title} ); // One "track" = all items with separators between them. We render the track // twice inside the moving strip so the loop is seamless (as the first copy // scrolls off the left, the second is already filling from the right). const buildTrack = (keyPrefix) => items.map((item, i) => ( {renderItem(item, i)} {separator} )); const animationName = 'wrapTickerScroll'; // Duration scales with number of items so speed feels consistent regardless // of how many releases come back (~10s per headline for a calm, readable pace). const durationSec = Math.max(40, items.length * 10); return (
{/* Inline keyframes + hover-pause; scoped by the animation name. */}
{/* LATEST label */}
Latest
{/* Moving viewport */}
{prefersReducedMotion ? (
{buildTrack('static')}
) : (
setPaused(true)} onBlur={() => setPaused(false)} style={{ paddingLeft: '1rem' }} > {/* Two identical tracks for a seamless -50% loop */} {buildTrack('a')} {buildTrack('b')}
)}
{/* MORE NEWS CTA */} { e.currentTarget.style.background = 'rgba(255,181,5,0.2)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,181,5,0.1)'; }} > More News {/* Close / dismiss — hides the whole bar for this page load */}
); } Object.assign(window, { NewsTicker });