// app-shared.jsx — Shared UI components for VantageBet prototype
/* ── Screen label (design reference only) ── */
function ScreenLabel({ label }) {
return (
{label}
);
}
/* ── Back header for sub-screens ── */
function BackHeader({ title, onBack, rightSlot }) {
return (
{title}
{rightSlot}
);
}
/* ── App header (main screens) ── */
function AppHeader({ dark, toggleDark, navigate, balance }) {
const bal = (balance || 1325.83).toFixed(2);
return (
);
}
/* ── Search bar ── */
function SearchBar({ placeholder = 'Find Games...' }) {
return (
);
}
/* ── Section header ── */
function SectionHeader({ title, count, badge, onSeeAll }) {
return (
{title}
{badge === 'LIVE' && (
LIVE
)}
);
}
/* ── Game tile ── */
function GameTile({ game, w=112, h=140, rank=null, showMeta=true, onClick }) {
const [pressed, setPressed] = React.useState(false);
const [fav, setFav] = React.useState(false);
const badgeColor = { LIVE:'var(--color-danger)', JACKPOT:'var(--color-success)', NEW:'var(--color-primary)', HOT:'#F5484A', FEATURED:'var(--color-warning)' };
return (
onClick && onClick(game)} onMouseDown={() => setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)}
style={{ position:'relative', flexShrink:0, width:w, cursor:'pointer', transform:pressed?'scale(0.96)':'scale(1)', transition:'transform 0.12s ease' }}>
{/* bottom scrim + title */}
{game.name}
{showMeta &&
{game.provider}
}
{rank != null && (
{rank}
)}
{game.badge && rank == null && (
{game.badge==='LIVE' && }
{game.badge}
)}
{/* favourite */}
{game.players && (
{game.players}
)}
onClick && onClick(game)} onMouseDown={() => setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)}
style={{ cursor:'pointer', transform:pressed?'scale(0.97)':'scale(1)', transition:'transform 0.12s ease' }}>
{game.badge && (
{game.badge==='LIVE' && }
{game.badge}
)}
{game.players && (
{game.players} playing
)}
{game.name}
{game.provider}
RTP {game.rtp}
{games.map(g => )}
);
}
/* ── Game row (horizontal scroll) ── */
function GameRow({ games, w=112, h=140, showRank=false, onGameClick }) {
return (
{games.map((g,i) => (
))}
{initials}
);
}
/* ── Odds button ── */
function OddsBtn({ label, value, selected, onClick }) {
return (
);
}
/* ── Divider ── */
function Divider({ mx=16 }) {
return ;
}
/* ── Empty state ── */
function EmptyState({ icon, title, body, cta, onCta }) {
return (
{title}
{body}
{cta &&
}
);
}
/* ── Progress bar ── */
function LimitBar({ pct }) {
const color = pct >= 100 ? 'var(--color-danger)' : pct >= 80 ? 'var(--color-warning)' : 'var(--color-primary)';
return (
);
}
Object.assign(window, {
ScreenLabel, BackHeader, AppHeader, SearchBar,
SectionHeader, GameTile, GameGrid, GameGridTile, GameRow, TeamBadge, OddsBtn,
Divider, EmptyState, LimitBar,
});