// components.jsx — shared Viewbot.to glass primitives & icons
// ===== ICONS (line, 1.6 stroke) =================================
const Icon = ({ children, size = 18, ...rest }) => (
);
const IconKick = ({ size = 18 }) => (
);
const IconTwitch = ({ size = 18 }) => (
);
const IconViewers = (p) => ;
const IconBolt = (p) => ;
const IconShield = (p) => ;
const IconChat = (p) => ;
const IconHeart = (p) => ;
const IconClip = (p) => ;
const IconPlay = (p) => ;
const IconCheck = (p) => ;
const IconArrow = (p) => ;
const IconChevron = (p) => ;
const IconClose = (p) => ;
const IconPlus = (p) => ;
const IconMinus = (p) => ;
const IconSearch = (p) => ;
const IconBell = (p) => ;
const IconUser = (p) => ;
const IconCard = (p) => ;
const IconCog = (p) => ;
const IconHome = (p) => ;
const IconChart = (p) => ;
const IconReceipt = (p) => ;
const IconLink = (p) => ;
const IconTrend = (p) => ;
const IconLock = (p) => ;
const IconClock = (p) => ;
const IconGlobe = (p) => ;
const IconSpark = (p) => ;
const IconCopy = (p) => ;
const IconMic = (p) => ;
// ===== Brand glyph (Viewbot.to logo mark) ========================
const VbLogo = ({ size = 28 }) => (
);
// ===== Background stage =========================================
const Stage = ({ children, orbs = true, className = '', style = {} }) => (
);
// ===== Glass card ===============================================
const Glass = ({ children, soft, flat, className = '', style = {}, ...rest }) => {
const cls = soft ? 'vb-glass-soft' : flat ? 'vb-glass-flat' : 'vb-glass';
return {children}
;
};
// ===== Button (renders as when href is given) ===============
const Btn = ({ variant = 'primary', size, children, icon, iconRight, href, onClick, style, ...rest }) => {
const cls = `vb-btn vb-btn-${variant} ${size ? `vb-btn-${size}` : ''}`;
const inner = (
<>
{icon}
{children && {children}}
{iconRight}
);
if (href) {
return (
{inner}
);
}
return (
);
};
// ===== Tabs (segmented control with thumb) ======================
const Tabs = ({ items, value, onChange, style }) => {
const ref = React.useRef(null);
const [thumb, setThumb] = React.useState({ left: 4, width: 0 });
React.useLayoutEffect(() => {
if (!ref.current) return;
const idx = items.findIndex((it) => (it.value ?? it) === value);
const btn = ref.current.querySelectorAll('.vb-tab')[idx];
if (btn) setThumb({ left: btn.offsetLeft, width: btn.offsetWidth });
}, [value, items]);
return (
{items.map((it) => {
const v = it.value ?? it;
const label = it.label ?? it;
return (
);
})}
);
};
// ===== Platform pill =============================================
const PlatformPill = ({ platform, size = 'sm' }) => {
if (platform === 'kick') return (
Kick
);
return Twitch;
};
// ===== Live pill =================================================
const LivePill = () => (
LIVE
);
// ===== Stat ======================================================
const Stat = ({ label, value, change, accent }) => (
{label}
{value}
{change && (
{change}
)}
);
// ===== Number ticker (animated) ==================================
const useTicker = (target, duration = 1500) => {
const [v, setV] = React.useState(0);
React.useEffect(() => {
let raf;
const start = performance.now();
const from = 0;
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setV(Math.round(from + (target - from) * eased));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [target, duration]);
return v;
};
// ===== Sparkline =================================================
const Sparkline = ({ data, color = 'rgba(255,255,255,0.6)', width = 120, height = 36, fill = true }) => {
const max = Math.max(...data);
const min = Math.min(...data);
const range = max - min || 1;
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((v - min) / range) * height * 0.85 - 2;
return [x, y];
});
const d = pts.map(([x, y], i) => (i === 0 ? `M${x},${y}` : `L${x},${y}`)).join(' ');
const area = `${d} L${width},${height} L0,${height} Z`;
return (
);
};
// ===== Live viewer count animator ================================
const LiveCounter = ({ base, jitter = 12, interval = 1500, format = (n) => n.toLocaleString() }) => {
const [n, setN] = React.useState(base);
React.useEffect(() => {
const t = setInterval(() => {
setN((cur) => {
const drift = Math.round((Math.random() - 0.5) * jitter * 2);
const next = cur + drift;
return Math.max(base - jitter * 4, Math.min(base + jitter * 4, next));
});
}, interval);
return () => clearInterval(t);
}, [base, jitter, interval]);
return {format(n)};
};
// ===== Stepper (number input with +/-) ============================
const Stepper = ({ value, onChange, min = 0, max = 99999, step = 1, suffix }) => (
onChange(Number(e.target.value))}
style={{ width: 60, textAlign: 'center', background: 'transparent', border: 'none', outline: 'none', color: 'var(--vb-fg-0)', fontFamily: 'var(--vb-font-mono)', fontSize: 14, fontWeight: 500 }}/>
{suffix && {suffix}}
);
// ===== Avatar circle with gradient ================================
const Avatar = ({ name = '?', size = 32, hue = 200 }) => (
{name.charAt(0).toUpperCase()}
);
// ===== Format helpers ============================================
const fmtMoney = (n) => '$' + n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const fmtNum = (n) => n.toLocaleString();
const fmtCompact = (n) => {
if (n >= 1e6) return (n/1e6).toFixed(1) + 'M';
if (n >= 1e3) return (n/1e3).toFixed(1) + 'K';
return String(n);
};
// ===== Shared site nav (reused on landing + pricing) =============
function SiteNav({ platform, setPlatform }) {
const links = [
{ label: 'Services', href: 'index.html#services' },
{ label: 'AI Chat', href: 'ai-chat.html' },
{ label: 'Pricing', href: 'pricing.html' },
{ label: 'Network', href: 'index.html#network' },
{ label: 'Affiliate', href: 'affiliates.html' },
];
return (
Viewbot.to
},
{ value: 'twitch', label: 'Twitch', icon: },
]} value={platform} onChange={setPlatform} style={{ marginRight: 12 }}/>
Sign in
} href="dashboard.html" style={{ marginLeft: 8 }}>Dashboard
);
}
// ===== Shared footer =============================================
function SiteFooter() {
return (
);
}
// ===== EXPORT =====================================================
Object.assign(window, {
Icon, IconKick, IconTwitch, IconViewers, IconBolt, IconShield, IconChat, IconHeart,
IconClip, IconPlay, IconCheck, IconArrow, IconChevron, IconClose, IconPlus, IconMinus,
IconSearch, IconBell, IconUser, IconCard, IconCog, IconHome, IconChart, IconReceipt,
IconLink, IconTrend, IconLock, IconClock, IconGlobe, IconSpark, IconCopy, IconMic,
VbLogo, Stage, Glass, Btn, Tabs, PlatformPill, LivePill, Stat, Sparkline,
LiveCounter, Stepper, Avatar, useTicker,
fmtMoney, fmtNum, fmtCompact,
SiteNav, SiteFooter,
});