323 lines
15 KiB
TypeScript
323 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import Link from "next/link"
|
|
import { useSearchParams } from "next/navigation"
|
|
import { useBetslipStore } from "@/lib/store/betslip-store"
|
|
import { mockEvents, popularLeagues, type Event } from "@/lib/mock-data"
|
|
import { cn } from "@/lib/utils"
|
|
import { ChevronDown, BarChart2, TrendingUp, Plus } from "lucide-react"
|
|
|
|
function OddsButton({ odds, onClick, isSelected }: {
|
|
odds: number
|
|
onClick: () => void
|
|
isSelected: boolean
|
|
}) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={cn(
|
|
"flex items-center justify-center py-2 px-0.5 border-r border-border/10 text-[10px] transition-all min-w-0 bg-brand-surface hover:bg-white/5 h-full",
|
|
isSelected && "bg-brand-primary text-black font-bold border-none"
|
|
)}
|
|
>
|
|
<span className={cn("font-bold tracking-tighter", isSelected ? "text-black" : "text-brand-primary")}>{odds.toFixed(2)}</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function EventRow({ event }: { event: Event }) {
|
|
const { bets, addBet } = useBetslipStore()
|
|
|
|
return (
|
|
<div className="bg-brand-surface border-b border-border/20 hover:bg-white/5 transition-colors h-[38px] flex items-center">
|
|
{/* Small Icons & ID Column */}
|
|
<div className="flex items-center gap-1.5 px-2 w-[80px] shrink-0 border-r border-border/10 h-full">
|
|
<BarChart2 className="size-3 text-muted-foreground hover:text-primary cursor-pointer shrink-0" />
|
|
<TrendingUp className="size-3 text-muted-foreground hover:text-primary cursor-pointer shrink-0" />
|
|
<span className="text-[9.5px] text-brand-primary font-bold tabular-nums italic ml-0.5">{event.id || "01682"}</span>
|
|
</div>
|
|
|
|
{/* Time & Team Column */}
|
|
<div className="flex items-center gap-3 px-3 w-[240px] shrink-0 border-r border-border/10 h-full">
|
|
<div className="flex flex-col text-[9.5px] font-bold text-white leading-tight italic shrink-0 w-[45px]">
|
|
<span>11:00</span>
|
|
<span className="text-white/40 uppercase font-medium">PM</span>
|
|
</div>
|
|
<span className="text-[10px] font-bold text-white truncate max-w-[180px]">{event.homeTeam} - {event.awayTeam}</span>
|
|
</div>
|
|
|
|
{/* Market Columns Grid (10 Markets) */}
|
|
<div className="flex-1 grid grid-cols-10 h-full shrink-0">
|
|
{event.markets.slice(0, 10).map((market) => {
|
|
const betId = `${event.id}-${market.id}`
|
|
const isSelected = bets.some((b) => b.id === betId)
|
|
return (
|
|
<OddsButton
|
|
key={market.id}
|
|
odds={market.odds}
|
|
isSelected={isSelected}
|
|
onClick={() => addBet({
|
|
id: betId,
|
|
event: `${event.homeTeam} - ${event.awayTeam}`,
|
|
league: `${event.sport} - ${event.country} - ${event.league}`,
|
|
market: "1X2",
|
|
selection: market.label,
|
|
odds: market.odds,
|
|
})}
|
|
/>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* More Markets Button -> match detail page */}
|
|
<Link
|
|
href={`/event/${event.id}`}
|
|
className="w-10 flex items-center justify-center h-full hover:bg-white/5 transition-colors border-l border-border/10 group"
|
|
aria-label="View all markets"
|
|
>
|
|
<Plus className="size-3 text-white group-hover:scale-110 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const MARKET_HEADERS = ["1", "x", "2", "Over (2.5)", "Under (2.5)", "1X", "12", "X2", "Yes", "No"];
|
|
|
|
export function EventsList({ filter = "All", sport = "all", search = "" }: {
|
|
filter?: string
|
|
sport?: string
|
|
search?: string
|
|
}) {
|
|
const searchParams = useSearchParams()
|
|
const leagueQuery = searchParams.get("league")
|
|
const [selectedLeague, setSelectedLeague] = useState<string | null>(leagueQuery)
|
|
const { bets, addBet } = useBetslipStore()
|
|
|
|
useEffect(() => {
|
|
setSelectedLeague(leagueQuery)
|
|
}, [leagueQuery])
|
|
|
|
const handleClose = () => {
|
|
const url = new URL(window.location.href)
|
|
url.searchParams.delete("league")
|
|
window.history.pushState({}, "", url)
|
|
setSelectedLeague(null)
|
|
}
|
|
|
|
const events = selectedLeague
|
|
? mockEvents.filter(e => e.league.toLowerCase() === selectedLeague.toLowerCase())
|
|
: mockEvents.filter((e) => {
|
|
if (filter === "Live" && !e.isLive) return false
|
|
if (sport !== "all" && e.sport.toLowerCase() !== sport.toLowerCase()) return false
|
|
return true
|
|
})
|
|
|
|
// Common Header Rendering
|
|
const renderTableHeaders = () => (
|
|
<>
|
|
{/* Table Header Categories */}
|
|
<div className="bg-brand-surface border-b border-border/40 grid grid-cols-5 text-[11px] font-bold text-white uppercase text-center items-center h-9">
|
|
<div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">Main</div>
|
|
<div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">Goals</div>
|
|
<div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">Handicap</div>
|
|
<div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20 text-[9px] leading-tight">Half Time / Full Time</div>
|
|
<div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer">Correct Score</div>
|
|
</div>
|
|
{/* Sub Headers */}
|
|
<div className="bg-brand-surface border-b border-border/40 grid grid-cols-5 text-[10px] font-bold text-white uppercase text-center items-center h-8">
|
|
<div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">1st Half</div>
|
|
<div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">2nd Half</div>
|
|
<div className="h-full flex items-center justify-center bg-brand-primary text-black border-r border-border/10">Combo</div>
|
|
<div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">Chance Mix</div>
|
|
<div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer">Home</div>
|
|
</div>
|
|
</>
|
|
)
|
|
|
|
const renderColumnHeaders = () => (
|
|
<div className="bg-brand-surface border-b border-white/5 h-8 flex items-center text-[9px] font-black text-white/40 uppercase">
|
|
<div className="w-[180px] px-3 flex items-center gap-1.5 border-r border-border/10 h-full">Main</div>
|
|
<div className="w-[180px] flex items-center justify-center border-r border-border/10 h-full">Over/Under</div>
|
|
<div className="flex-1 grid grid-cols-10 text-center h-full items-center tracking-tighter">
|
|
{MARKET_HEADERS.map(h => <span key={h}>{h}</span>)}
|
|
</div>
|
|
<div className="w-10 border-l border-border/10 h-full" />
|
|
</div>
|
|
)
|
|
|
|
const renderEventItem = (event: Event) => (
|
|
<div key={event.id} className="h-[34px] group flex items-center border-b border-white/5 bg-brand-bg hover:bg-white/5 transition-colors">
|
|
{/* Stats & Icons */}
|
|
<div className="w-[35px] flex items-center justify-center gap-1 px-2 border-r border-white/5 h-full opacity-40 group-hover:opacity-100">
|
|
<BarChart2 className="size-3 cursor-pointer hover:text-primary" />
|
|
</div>
|
|
{/* ID */}
|
|
<div className="w-[45px] text-[10px] font-black text-brand-primary italic tabular-nums text-center border-r border-white/5 h-full flex items-center justify-center">
|
|
{event.id}
|
|
</div>
|
|
{/* Time */}
|
|
<div className="w-[50px] flex flex-col items-center justify-center border-r border-white/5 h-full leading-none italic font-black text-[9px]">
|
|
<span>{event.time}</span>
|
|
<span className="text-[7px] text-white/30 uppercase mt-0.5">PM</span>
|
|
</div>
|
|
{/* Event Name -> same route as + icon (match detail) */}
|
|
<Link
|
|
href={`/event/${event.id}`}
|
|
className="flex-1 px-4 text-[10.5px] font-black text-white truncate max-w-[200px] hover:text-brand-primary transition-colors"
|
|
>
|
|
{event.homeTeam} - {event.awayTeam}
|
|
</Link>
|
|
{/* Odds Grid */}
|
|
<div className="flex-1 grid grid-cols-10 h-full">
|
|
{event.markets.slice(0, 10).map((market) => {
|
|
const betId = `${event.id}-${market.id}`
|
|
const isSelected = bets.some((b) => b.id === betId)
|
|
return (
|
|
<button
|
|
key={market.id}
|
|
onClick={() => addBet({
|
|
id: betId,
|
|
event: `${event.homeTeam} - ${event.awayTeam}`,
|
|
league: `${event.sport} - ${event.country} - ${event.league}`,
|
|
market: "1X2",
|
|
selection: market.label,
|
|
odds: market.odds,
|
|
})}
|
|
className={cn(
|
|
"flex items-center justify-center text-[10.5px] font-black tabular-nums transition-all border-r border-white/5",
|
|
isSelected ? "bg-brand-primary text-black" : "text-brand-primary hover:bg-white/5"
|
|
)}
|
|
>
|
|
{market.odds.toFixed(2)}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
{/* More Button -> match detail page */}
|
|
<Link
|
|
href={`/event/${event.id}`}
|
|
className="w-10 flex items-center justify-center h-full hover:bg-white/5 transition-colors border-l border-white/5 text-white/40 hover:text-white"
|
|
aria-label="View all markets"
|
|
>
|
|
<Plus className="size-3" />
|
|
</Link>
|
|
</div>
|
|
)
|
|
|
|
if (selectedLeague) {
|
|
// Group by date for league view
|
|
const groupedEvents = events.reduce((acc, event) => {
|
|
if (!acc[event.date]) acc[event.date] = []
|
|
acc[event.date].push(event)
|
|
return acc
|
|
}, {} as Record<string, Event[]>)
|
|
|
|
return (
|
|
<div className="flex flex-col bg-brand-bg rounded overflow-hidden shadow-2xl">
|
|
{/* League Header / Breadcrumbs */}
|
|
<div className="bg-brand-surface px-3 py-2 flex items-center justify-between border-b border-border/20">
|
|
<div className="flex items-center gap-2 text-[11px] font-bold text-white/60">
|
|
<Plus className="size-3 cursor-pointer hover:text-white" />
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-white font-black">•••</span>
|
|
<span className="uppercase">Football</span>
|
|
<span className="mx-1 opacity-20">|</span>
|
|
<span className="text-white uppercase">{selectedLeague === "LaLiga" ? "Spain - LaLiga" : selectedLeague}</span>
|
|
</div>
|
|
</div>
|
|
<button onClick={handleClose} className="text-white hover:text-primary transition-colors">
|
|
<Plus className="size-5 rotate-45" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Large Market Tab Grid */}
|
|
<div className="grid grid-cols-5 bg-brand-bg border-b border-border/10">
|
|
{[
|
|
{ label: "Main", active: true }, { label: "Goals" }, { label: "Handicap" }, { label: "Half Time / Full Time" }, { label: "Correct Score" },
|
|
{ label: "1st Half" }, { label: "2nd Half" }, { label: "Asian Markets" }, { label: "Corners" }, { label: "Home" }
|
|
].map((m, i) => (
|
|
<button
|
|
key={i}
|
|
className={cn(
|
|
"h-8 border-r border-b border-border/10 flex items-center justify-center text-[10px] font-black uppercase transition-all",
|
|
m.active ? "bg-brand-primary text-black" : "text-white/60 hover:bg-brand-surface"
|
|
)}
|
|
>
|
|
{m.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Column Headers */}
|
|
{renderColumnHeaders()}
|
|
|
|
{/* Grouped Events */}
|
|
<div className="overflow-y-auto max-h-[700px]">
|
|
{Object.entries(groupedEvents).map(([date, dateEvents]) => (
|
|
<div key={date} className="flex flex-col">
|
|
<div className="bg-brand-surface px-2 py-1 text-[10px] font-black text-white border-b border-white/5">
|
|
{date}
|
|
</div>
|
|
{dateEvents.map(event => renderEventItem(event))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Home View (No League Selected)
|
|
const homeEventsByLeague = events.reduce((acc, event) => {
|
|
if (!acc[event.league]) acc[event.league] = []
|
|
acc[event.league].push(event)
|
|
return acc
|
|
}, {} as Record<string, Event[]>)
|
|
|
|
return (
|
|
<div className="flex flex-col bg-brand-bg rounded overflow-hidden">
|
|
<div className="flex flex-col">
|
|
{Object.entries(homeEventsByLeague).map(([leagueName, leagueEvents]) => (
|
|
<div key={leagueName} className="flex flex-col border-b border-white/5 last:border-none">
|
|
{/* League Box Header */}
|
|
<div className="bg-brand-surface-light px-3 py-1.5 text-[10px] font-bold text-brand-primary uppercase border-y border-border/20 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[14px]">
|
|
{popularLeagues.find(l => l.name === leagueName)?.icon ||
|
|
popularLeagues.find(l => l.id.toLowerCase() === leagueName.toLowerCase())?.icon ||
|
|
"⚽"}
|
|
</span>
|
|
<span>{leagueName === "LaLiga" ? "Spain - LaLiga" :
|
|
leagueName === "Premier League" ? "England - Premier League" :
|
|
leagueName === "Bundesliga" ? "Germany - Bundesliga" :
|
|
leagueName === "Ligue 1" ? "France - Ligue 1" :
|
|
leagueName}</span>
|
|
</div>
|
|
<ChevronDown className="size-4 text-white" />
|
|
</div>
|
|
|
|
{/* Column Headers for each league box */}
|
|
<div className="bg-brand-surface px-3 py-1 flex items-center text-[8px] font-black text-white/40 uppercase border-b border-border/20">
|
|
<div className="w-[180px] flex gap-4">
|
|
<span className="w-5 text-center">Stats</span>
|
|
<span className="w-6">ID</span>
|
|
<span className="w-10">Time</span>
|
|
<span>Event</span>
|
|
</div>
|
|
<div className="flex-1 grid grid-cols-10 text-center tracking-tighter">
|
|
{MARKET_HEADERS.map(h => <span key={h}>{h}</span>)}
|
|
</div>
|
|
<div className="w-10" />
|
|
</div>
|
|
|
|
{/* Matches in this league */}
|
|
<div className="flex flex-col">
|
|
{leagueEvents.map(event => renderEventItem(event))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|