65 lines
3.3 KiB
TypeScript
65 lines
3.3 KiB
TypeScript
const mockHistory = [
|
|
{ id: "BET001", event: "Arsenal vs Man City", selection: "Arsenal Win", odds: 2.80, stake: 100, status: "won", date: "2026-02-18" },
|
|
{ id: "BET002", event: "Bayern vs Dortmund", selection: "Over 2.5 Goals", odds: 1.65, stake: 50, status: "lost", date: "2026-02-17" },
|
|
{ id: "BET003", event: "NBA: Lakers vs Celtics", selection: "Lakers ML", odds: 1.85, stake: 200, status: "pending", date: "2026-02-19" },
|
|
{ id: "BET004", event: "St. George vs Dire Dawa", selection: "St. George Win", odds: 1.65, stake: 500, status: "won", date: "2026-02-16" },
|
|
]
|
|
|
|
const statusStyles: Record<string, string> = {
|
|
won: "text-primary bg-primary/20",
|
|
lost: "text-destructive bg-destructive/20",
|
|
pending: "text-yellow-500 bg-yellow-500/20",
|
|
}
|
|
|
|
export default function HistoryPage() {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="border-b border-border pb-2 flex items-center justify-between">
|
|
<h1 className="text-sm font-black uppercase tracking-wide text-foreground">Bet History</h1>
|
|
<span className="text-[11px] text-muted-foreground">Please login to see full history</span>
|
|
</div>
|
|
|
|
{/* Filter */}
|
|
<div className="flex gap-2">
|
|
{["All", "Won", "Lost", "Pending"].map((f) => (
|
|
<button key={f} className="px-3 py-1 text-[11px] font-semibold rounded border border-border text-muted-foreground hover:border-primary hover:text-primary transition-colors">
|
|
{f}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="bg-card border border-border rounded overflow-hidden">
|
|
<table className="w-full text-[11px]">
|
|
<thead>
|
|
<tr className="bg-secondary border-b border-border text-muted-foreground uppercase text-[10px]">
|
|
<th className="px-3 py-2 text-left font-semibold">Bet ID</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Event</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Selection</th>
|
|
<th className="px-3 py-2 text-right font-semibold">Odds</th>
|
|
<th className="px-3 py-2 text-right font-semibold">Stake</th>
|
|
<th className="px-3 py-2 text-center font-semibold">Status</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{mockHistory.map((bet) => (
|
|
<tr key={bet.id} className="hover:bg-muted/30 transition-colors">
|
|
<td className="px-3 py-2 font-mono text-muted-foreground">{bet.id}</td>
|
|
<td className="px-3 py-2 font-medium text-foreground">{bet.event}</td>
|
|
<td className="px-3 py-2 text-muted-foreground">{bet.selection}</td>
|
|
<td className="px-3 py-2 text-right font-bold text-primary">{bet.odds.toFixed(2)}</td>
|
|
<td className="px-3 py-2 text-right">{bet.stake} ETB</td>
|
|
<td className="px-3 py-2 text-center">
|
|
<span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${statusStyles[bet.status]}`}>
|
|
{bet.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2 text-muted-foreground">{bet.date}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |