81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
import { useBetslipStore } from "@/lib/store/betslip-store"
|
|
|
|
const mockEvents = [
|
|
{
|
|
id: "1",
|
|
sport: "Soccer",
|
|
name: "Team A vs Team B",
|
|
markets: [
|
|
{ id: "1x2_home", label: "1", odds: 1.85 },
|
|
{ id: "1x2_draw", label: "X", odds: 3.4 },
|
|
{ id: "1x2_away", label: "2", odds: 4.1 },
|
|
],
|
|
},
|
|
{
|
|
id: "2",
|
|
sport: "Basketball",
|
|
name: "City Wolves vs Lake Bears",
|
|
markets: [
|
|
{ id: "spread_home", label: "Home -4.5", odds: 1.9 },
|
|
{ id: "spread_away", label: "Away +4.5", odds: 1.9 },
|
|
],
|
|
},
|
|
]
|
|
|
|
export function EventsList() {
|
|
const { addBet } = useBetslipStore()
|
|
|
|
return (
|
|
<Card className="flex-1">
|
|
<CardContent className="px-0 pb-4 pt-3">
|
|
<ScrollArea className="h-[360px]">
|
|
<div className="space-y-2 px-3 pb-2">
|
|
{mockEvents.map((event) => (
|
|
<div
|
|
key={event.id}
|
|
className="rounded-md border bg-card/50 p-2 text-xs"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium">{event.name}</div>
|
|
<div className="text-[11px] text-muted-foreground">
|
|
{event.sport}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
{event.markets.map((market) => (
|
|
<Button
|
|
key={market.id}
|
|
size="xs"
|
|
className="min-w-[60px] justify-between rounded-sm bg-secondary text-secondary-foreground text-[11px] hover:bg-primary hover:text-primary-foreground"
|
|
onClick={() =>
|
|
addBet({
|
|
id: `${event.id}-${market.id}`,
|
|
event: event.name,
|
|
market: event.sport,
|
|
selection: market.label,
|
|
odds: market.odds,
|
|
})
|
|
}
|
|
>
|
|
<span>{market.label}</span>
|
|
<span className="font-semibold">
|
|
{market.odds.toFixed(2)}
|
|
</span>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|