65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { useBetslipStore } from "@/lib/store/betslip-store";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
|
||
export function Betslip() {
|
||
const { bets, removeBet, clearBets } = useBetslipStore();
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||
<CardTitle className="text-sm font-semibold">
|
||
Betslip {bets.length}
|
||
</CardTitle>
|
||
{bets.length > 0 && (
|
||
<button
|
||
onClick={clearBets}
|
||
className="text-xs text-muted-foreground hover:underline"
|
||
>
|
||
Clear all
|
||
</button>
|
||
)}
|
||
</CardHeader>
|
||
<CardContent className="space-y-3 text-xs">
|
||
{bets.length === 0 ? (
|
||
<p className="text-muted-foreground">
|
||
No bet has been selected. To select a bet, please click on the
|
||
respective odds.
|
||
</p>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{bets.map((bet) => (
|
||
<div
|
||
key={bet.id}
|
||
className="rounded border bg-card/40 p-2 text-xs"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<div className="font-medium">{bet.event}</div>
|
||
<div className="text-[10px] text-muted-foreground">
|
||
{bet.market} – {bet.selection}
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="font-semibold">{bet.odds.toFixed(2)}</div>
|
||
<button
|
||
onClick={() => removeBet(bet.id)}
|
||
className="text-[10px] text-destructive hover:underline"
|
||
>
|
||
Remove
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
<Button className="w-full text-xs" size="sm">
|
||
Place bet
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|