69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
export default function CheckTicketPage() {
|
|
const [ticketId, setTicketId] = useState("")
|
|
const [result, setResult] = useState<null | object>(null)
|
|
|
|
const handleCheck = () => {
|
|
if (!ticketId.trim()) return
|
|
setResult({
|
|
id: ticketId,
|
|
event: "Arsenal vs Manchester City",
|
|
selection: "Arsenal Win",
|
|
odds: "2.80",
|
|
stake: "100 ETB",
|
|
potentialWin: "280 ETB",
|
|
status: "pending",
|
|
date: "2026-02-19 17:30",
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-md mx-auto mt-8 space-y-4">
|
|
<div className="border-b border-border pb-2">
|
|
<h1 className="text-sm font-black uppercase tracking-wide text-foreground">Check Ticket</h1>
|
|
</div>
|
|
|
|
<div className="bg-card border border-border rounded-lg p-6 space-y-4">
|
|
<div>
|
|
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-2">Ticket ID / Bet Code</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={ticketId}
|
|
onChange={(e) => setTicketId(e.target.value)}
|
|
placeholder="Enter ticket ID or bet code"
|
|
className="flex-1 bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary"
|
|
onKeyDown={(e) => e.key === "Enter" && handleCheck()}
|
|
/>
|
|
<button
|
|
onClick={handleCheck}
|
|
className="bg-primary text-primary-foreground font-bold px-4 py-2 rounded uppercase text-sm hover:opacity-90 transition-opacity"
|
|
>
|
|
Check
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{result && (
|
|
<div className="border border-border rounded overflow-hidden">
|
|
<div className="bg-secondary px-3 py-2 flex justify-between">
|
|
<span className="text-[11px] font-bold uppercase text-foreground">Ticket Details</span>
|
|
<span className="text-[10px] text-yellow-500 font-bold uppercase bg-yellow-500/20 px-2 py-0.5 rounded">Pending</span>
|
|
</div>
|
|
<div className="p-3 space-y-1.5 text-[11px]">
|
|
{Object.entries(result as Record<string, string>).filter(([k]) => k !== "status").map(([key, val]) => (
|
|
<div key={key} className="flex justify-between">
|
|
<span className="text-muted-foreground capitalize">{key.replace(/([A-Z])/g, ' $1')}:</span>
|
|
<span className="text-foreground font-medium">{val}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |