149 lines
3.8 KiB
TypeScript
149 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
interface LiveProp {
|
|
player: string;
|
|
stat: string;
|
|
line: number;
|
|
direction: string;
|
|
grade: string;
|
|
sport: string;
|
|
}
|
|
|
|
const SPORT_COLOR: Record<string, string> = {
|
|
NBA: '#E94B3C',
|
|
MLB: '#1E90FF',
|
|
WNBA: '#FFB347',
|
|
};
|
|
|
|
function gradeColor(grade: string): string {
|
|
const g = (grade || '').trim().toUpperCase().charAt(0);
|
|
if (g === 'A') return 'var(--grade-a)';
|
|
if (g === 'B') return 'var(--grade-b)';
|
|
if (g === 'C') return 'var(--grade-c)';
|
|
return 'var(--grade-d)';
|
|
}
|
|
|
|
export default function LivePropsStrip() {
|
|
const [props, setProps] = useState<LiveProp[] | null>(null);
|
|
const [error, setError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
async function load() {
|
|
try {
|
|
const res = await fetch('/api/props/live');
|
|
if (!res.ok) {
|
|
if (!cancelled) setError(true);
|
|
return;
|
|
}
|
|
const data = await res.json();
|
|
if (cancelled) return;
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
setProps(data.slice(0, 12));
|
|
setError(false);
|
|
} else {
|
|
setProps([]);
|
|
}
|
|
} catch {
|
|
if (!cancelled) setError(true);
|
|
}
|
|
}
|
|
load();
|
|
const id = setInterval(load, 60_000);
|
|
return () => {
|
|
cancelled = true;
|
|
clearInterval(id);
|
|
};
|
|
}, []);
|
|
|
|
// Loading / fallback state
|
|
if (props === null) return null;
|
|
|
|
if (error || props.length === 0) {
|
|
return (
|
|
<section
|
|
style={{
|
|
padding: '24px',
|
|
borderTop: '1px solid var(--border)',
|
|
borderBottom: '1px solid var(--border)',
|
|
background: 'var(--bg-surface)',
|
|
}}
|
|
>
|
|
<p
|
|
className="mono"
|
|
style={{
|
|
textAlign: 'center',
|
|
fontSize: 12,
|
|
color: 'var(--text-tertiary)',
|
|
letterSpacing: '0.08em',
|
|
}}
|
|
>
|
|
LIVE GRADES APPEAR HERE AS BOOKS POST LINES
|
|
</p>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Duplicate for seamless ticker scroll
|
|
const ticker = [...props, ...props];
|
|
|
|
return (
|
|
<section
|
|
style={{
|
|
padding: '20px 0',
|
|
borderTop: '1px solid var(--border)',
|
|
borderBottom: '1px solid var(--border)',
|
|
background: 'var(--bg-surface)',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<div className="animate-ticker" style={{ display: 'flex', gap: 16, whiteSpace: 'nowrap', width: 'max-content' }}>
|
|
{ticker.map((p, i) => (
|
|
<div
|
|
key={`${p.player}-${i}`}
|
|
style={{
|
|
display: 'inline-flex',
|
|
gap: 12,
|
|
alignItems: 'center',
|
|
padding: '8px 16px',
|
|
background: 'var(--bg-elevated)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: 12,
|
|
}}
|
|
>
|
|
<span
|
|
className="mono"
|
|
style={{
|
|
fontSize: 10,
|
|
fontWeight: 700,
|
|
padding: '2px 6px',
|
|
borderRadius: 999,
|
|
color: SPORT_COLOR[p.sport] || 'var(--text-secondary)',
|
|
background: `${SPORT_COLOR[p.sport] || 'var(--text-secondary)'}1F`,
|
|
}}
|
|
>
|
|
{p.sport}
|
|
</span>
|
|
<span style={{ fontSize: 13, fontWeight: 600 }}>{p.player}</span>
|
|
<span className="mono" style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
|
|
{p.direction} {p.line} {p.stat}
|
|
</span>
|
|
<span
|
|
className="mono"
|
|
style={{
|
|
fontSize: 16,
|
|
fontWeight: 800,
|
|
color: gradeColor(p.grade),
|
|
}}
|
|
>
|
|
{p.grade}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|