50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
export function CheckYourBet() {
|
|
const [betId, setBetId] = useState("")
|
|
const [result, setResult] = useState<null | "pending" | "won" | "lost">(null)
|
|
|
|
const handleCheck = () => {
|
|
if (!betId.trim()) return
|
|
// Mock result
|
|
const results = ["pending", "won", "lost"] as const
|
|
setResult(results[Math.floor(Math.random() * results.length)])
|
|
}
|
|
|
|
return (
|
|
<div className="bg-transparent border-t border-border/20 pt-4 pb-2">
|
|
<div className="px-1 text-center space-y-3">
|
|
<h3 className="text-[12px] font-bold uppercase text-brand-primary">Check Your Bet</h3>
|
|
<p className="text-[11px] text-white">Your bet ID</p>
|
|
<div className="flex gap-1">
|
|
<input
|
|
type="text"
|
|
value={betId}
|
|
onChange={(e) => setBetId(e.target.value)}
|
|
className="flex-1 bg-brand-bg border border-border/40 px-2 py-2 text-[11px] text-white outline-none focus:border-brand-primary"
|
|
onKeyDown={(e) => e.key === "Enter" && handleCheck()}
|
|
/>
|
|
<button
|
|
onClick={handleCheck}
|
|
className="bg-brand-primary text-black px-2 py-1.5 flex items-center justify-center min-w-[32px] hover:bg-brand-primary-hover transition-colors"
|
|
>
|
|
<svg viewBox="0 0 24 24" className="size-5 fill-current"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
|
</button>
|
|
</div>
|
|
{result && (
|
|
<div className={`text-[11px] font-semibold p-2 rounded text-center mt-2 ${
|
|
result === "won" ? "bg-primary/20 text-primary" :
|
|
result === "lost" ? "bg-destructive/20 text-destructive" :
|
|
"bg-secondary text-muted-foreground"
|
|
}`}>
|
|
{result === "won" && "🎉 Bet Won!"}
|
|
{result === "lost" && "❌ Bet Lost"}
|
|
{result === "pending" && "⏳ Bet Pending"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |