;
const w = 400, min = Math.min(...points), max = Math.max(...points), range = (max - min) || 1;
const pts = points.map((v, i) => [i / (points.length - 1) * w, 10 + (1 - (v - min) / range) * (height - 20)]);
const d = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
const color = change > 0 ? 'var(--green)' : change < 0 ? 'var(--red)' : 'var(--ink-3)';
const last = pts[pts.length - 1];
return (
);
}
function CSXWordmark({ size=32 }) {
return (
C
S
X
);
}
function useCSXIsMobile() {
const [m, setM] = React.useState(() => window.innerWidth < 768);
React.useEffect(() => {
const h = () => setM(window.innerWidth < 768);
window.addEventListener('resize', h, {passive: true});
return () => window.removeEventListener('resize', h);
}, []);
return m;
}
function CSXNav({ active }) {
const isMobile = useCSXIsMobile();
const links = [
{ k:'how', label:'How it works', href:'/how-it-works.html' },
{ k:'wallys', label:'Wallys', href:'/wallys.html' },
{ k:'creators', label:'Creators', href:'/creators.html' },
...(window.CSX_EARN_LIVE ? [{ k:'earn', label:'Earn', href:'/earn.html' }] : []),
];
const linkStyle = (l) => ({
color: active===l.k ? 'var(--ink)' : 'var(--ink-2)',
borderBottom: active===l.k ? '1px solid var(--purple)' : '1px solid transparent',
paddingBottom:4, whiteSpace:'nowrap',
});
const enterStyle = {
padding: isMobile ? '10px 18px' : '10px 22px', background:'var(--purple-2)', color:'#fff', fontSize:13, borderRadius:8, fontWeight:700, display:'inline-block',
boxShadow:'0 0 0 1px rgba(167,139,250,0.5), 0 8px 24px rgba(124,92,255,0.35)', whiteSpace:'nowrap',
};
return (
);
}
function CSXTicker() {
const { market, failed } = useCSXMarket();
const strip = { background:'var(--bg-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', overflow:'hidden', whiteSpace:'nowrap', padding:'10px 0' };
if (!market) {
return
{failed ? 'Market data unavailable' : 'Loading the market…'}
;
}
const items = [...market.ticker, ...market.ticker];
return (
{items.map((f, i) => (
{f.handle}
ω
{csxFmt.price(f.price)}
{f.change !== 0 && 0 ? 'var(--green)' : 'var(--red)'}}>{csxFmt.change(f.change)}}
))}
);
}
function CSXFooter() {
const isMobile = useCSXIsMobile();
const cols = [
{ t:'Product', items:[['Explore','/'],['Wallys','/wallys.html'],['Holdings','https://app.creatorstockx.com/']] },
{ t:'Creators', items:[['Claim your stock','/creators.html'],['Grow your market','/creators.html'],['Creator docs','#'],['Partner program','#']] },
{ t:'Brands', items:[['Join the network','#'],['Redemption API','#'],['Case studies','#'],['Contact sales','#']] },
{ t:'Company', items:[['About','#'],['Journal','#'],['Careers','#'],['Press kit','#'],['Privacy','#']] },
];
return (
);
}
function CSXEyebrow({ children, align='left' }) {
return (
{children}
);
}
Object.assign(window, { csxMarket, useCSXMarket, csxPriceHistory, csxFmt, CSXTile, CSXChange, CSXSparkline, CSXWordmark, CSXNav, CSXTicker, CSXFooter, CSXEyebrow });