feat: Implement multiple pages including Check Ticket, Deposit, History, Live, Login, Profile, Promotions, Raffle, Register, and Rules with enhanced UI and functionality
This commit is contained in:
parent
cfb6b61120
commit
6376713398
|
|
@ -1,6 +1,69 @@
|
|||
"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="text-sm text-foreground">Check ticket page placeholder</div>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,94 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
const methods = [
|
||||
{ id: "telebirr", name: "Telebirr", icon: "📱", desc: "Ethiopian mobile payment" },
|
||||
{ id: "cbe", name: "CBE Birr", icon: "🏦", desc: "Commercial Bank of Ethiopia" },
|
||||
{ id: "awash", name: "Awash Bank", icon: "🏛️", desc: "Awash Bank transfer" },
|
||||
{ id: "abyssinia", name: "Bank of Abyssinia", icon: "💳", desc: "Bank of Abyssinia" },
|
||||
]
|
||||
|
||||
const quickAmounts = [50, 100, 200, 500, 1000, 2000]
|
||||
|
||||
export default function DepositPage() {
|
||||
const [method, setMethod] = useState("telebirr")
|
||||
const [amount, setAmount] = useState("")
|
||||
|
||||
return (
|
||||
<div className="text-sm text-foreground">Deposit page placeholder</div>
|
||||
<div className="max-w-md mx-auto mt-8">
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
<div className="bg-primary px-6 py-4">
|
||||
<h1 className="text-base font-black text-primary-foreground uppercase tracking-wide">Deposit</h1>
|
||||
<p className="text-[11px] text-primary-foreground/70 mt-0.5">Add funds to your account</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-5">
|
||||
{/* Balance */}
|
||||
<div className="bg-secondary/50 border border-border rounded p-3 flex justify-between items-center">
|
||||
<span className="text-[11px] text-muted-foreground uppercase font-semibold">Current Balance</span>
|
||||
<span className="font-bold text-primary text-lg">0.00 ETB</span>
|
||||
</div>
|
||||
|
||||
{/* Payment methods */}
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-2">Payment Method</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{methods.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setMethod(m.id)}
|
||||
className={`flex items-center gap-2 p-2.5 rounded border transition-all text-left ${
|
||||
method === m.id
|
||||
? "border-primary bg-primary/10 text-foreground"
|
||||
: "border-border bg-secondary/30 text-muted-foreground hover:border-primary/50"
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">{m.icon}</span>
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold">{m.name}</div>
|
||||
<div className="text-[10px] opacity-70">{m.desc}</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Amount */}
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-2">Amount (ETB)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
placeholder="Enter amount"
|
||||
className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary"
|
||||
min="50"
|
||||
/>
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{quickAmounts.map((a) => (
|
||||
<button
|
||||
key={a}
|
||||
onClick={() => setAmount(String(a))}
|
||||
className={`text-[11px] px-2.5 py-1 rounded border transition-colors font-semibold ${
|
||||
amount === String(a)
|
||||
? "bg-primary text-primary-foreground border-primary"
|
||||
: "border-border text-muted-foreground hover:border-primary hover:text-primary"
|
||||
}`}
|
||||
>
|
||||
{a} ETB
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] text-muted-foreground">Min deposit: 50 ETB · Max deposit: 50,000 ETB</p>
|
||||
|
||||
<button className="w-full bg-primary text-primary-foreground font-bold py-3 rounded uppercase text-sm hover:opacity-90 transition-opacity">
|
||||
Deposit {amount ? `${amount} ETB` : ""}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,65 @@
|
|||
export default function HistoryPage() {
|
||||
return (
|
||||
<div className="text-sm text-foreground">History page placeholder</div>
|
||||
)
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
import { InPlayPage } from "@/components/betting/in-play-page"
|
||||
import { LiveEventsList } from "@/components/betting/live-events-list"
|
||||
|
||||
export default function LivePage() {
|
||||
return <InPlayPage />
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<LiveEventsList />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,60 @@
|
|||
export default function LoginPage() {
|
||||
return <div className="text-sm text-foreground">Login page placeholder</div>
|
||||
}
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function LoginPage() {
|
||||
const [username, setUsername] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
|
||||
return (
|
||||
<div className="max-w-sm mx-auto mt-8">
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
<div className="bg-primary px-6 py-4">
|
||||
<h1 className="text-base font-black text-primary-foreground uppercase tracking-wide">Login</h1>
|
||||
<p className="text-[11px] text-primary-foreground/70 mt-0.5">Sign in to your Harifsport account</p>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Enter username"
|
||||
className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter password"
|
||||
className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-[11px]">
|
||||
<label className="flex items-center gap-2 text-muted-foreground cursor-pointer">
|
||||
<input type="checkbox" className="rounded" />
|
||||
Remember me
|
||||
</label>
|
||||
<Link href="/reset-password" className="text-primary hover:underline">
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<button className="w-full bg-primary text-primary-foreground font-bold py-2.5 rounded uppercase text-sm hover:opacity-90 transition-opacity">
|
||||
Login
|
||||
</button>
|
||||
<p className="text-center text-[11px] text-muted-foreground">
|
||||
Don't have an account?{" "}
|
||||
<Link href="/register" className="text-primary hover:underline font-semibold">
|
||||
Register now
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,6 +1,50 @@
|
|||
import Link from "next/link"
|
||||
|
||||
export default function ProfilePage() {
|
||||
return (
|
||||
<div className="text-sm text-foreground">Profile page placeholder</div>
|
||||
<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">My Profile</h1>
|
||||
</div>
|
||||
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
{/* Avatar */}
|
||||
<div className="bg-gradient-to-r from-primary/30 to-primary/10 px-6 py-6 flex items-center gap-4">
|
||||
<div className="size-16 bg-primary/20 rounded-full flex items-center justify-center text-2xl border-2 border-primary/30">
|
||||
👤
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-foreground">Guest User</div>
|
||||
<div className="text-[11px] text-muted-foreground">Not logged in</div>
|
||||
<Link href="/login" className="inline-block mt-2 bg-primary text-primary-foreground text-[11px] font-bold px-3 py-1 rounded hover:opacity-90">
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu items */}
|
||||
<div className="divide-y divide-border">
|
||||
{[
|
||||
{ icon: "🏆", label: "My Bets", href: "/history" },
|
||||
{ icon: "💰", label: "Deposit", href: "/deposit" },
|
||||
{ icon: "🎁", label: "Bonus", href: "/bonus" },
|
||||
{ icon: "🔔", label: "Notifications", href: "/notifications" },
|
||||
{ icon: "📋", label: "Rules", href: "/rules" },
|
||||
].map((item) => (
|
||||
<Link
|
||||
key={item.label}
|
||||
href={item.href}
|
||||
className="flex items-center justify-between px-4 py-3 hover:bg-muted transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-lg">{item.icon}</span>
|
||||
<span className="text-[12px] font-medium text-foreground">{item.label}</span>
|
||||
</div>
|
||||
<span className="text-muted-foreground group-hover:text-primary transition-colors">›</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,60 @@
|
|||
const promotions = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Welcome Bonus",
|
||||
description: "Get 100% up to 500 ETB on your first deposit",
|
||||
badge: "NEW",
|
||||
color: "from-primary/20 to-primary/5",
|
||||
icon: "🎁",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Accumulator Boost",
|
||||
description: "Get up to 50% extra winnings on accumulators of 5+ selections",
|
||||
badge: "POPULAR",
|
||||
color: "from-yellow-500/20 to-yellow-500/5",
|
||||
icon: "⚡",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Live Bet Cashback",
|
||||
description: "5% cashback on all losing live bets, credited every Monday",
|
||||
badge: "",
|
||||
color: "from-blue-500/20 to-blue-500/5",
|
||||
icon: "🔄",
|
||||
},
|
||||
]
|
||||
|
||||
export default function PromotionsPage() {
|
||||
return (
|
||||
<div className="text-sm text-foreground">Promotions page placeholder</div>
|
||||
<div className="space-y-4">
|
||||
<div className="border-b border-border pb-2">
|
||||
<h1 className="text-sm font-black uppercase tracking-wide text-foreground">Promotions</h1>
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
{promotions.map((promo) => (
|
||||
<div
|
||||
key={promo.id}
|
||||
className={`bg-gradient-to-r ${promo.color} border border-border rounded-lg p-4 flex items-center gap-4`}
|
||||
>
|
||||
<div className="text-4xl">{promo.icon}</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-bold text-sm text-foreground">{promo.title}</h3>
|
||||
{promo.badge && (
|
||||
<span className="bg-primary text-primary-foreground text-[10px] font-bold px-1.5 py-0.5 rounded">
|
||||
{promo.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">{promo.description}</p>
|
||||
</div>
|
||||
<button className="shrink-0 bg-primary text-primary-foreground text-[11px] font-bold px-4 py-2 rounded hover:opacity-90 transition-opacity uppercase">
|
||||
Claim
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,58 @@
|
|||
export default function RafflePage() {
|
||||
return <div className="text-sm text-foreground">Raffle page placeholder</div>
|
||||
}
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
export default function RafflePage() {
|
||||
const [tickets, setTickets] = useState(0)
|
||||
|
||||
return (
|
||||
<div className="max-w-lg 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">Raffle</h1>
|
||||
</div>
|
||||
|
||||
{/* Current raffle */}
|
||||
<div className="bg-gradient-to-br from-primary/20 to-card border border-primary/30 rounded-xl p-6 text-center">
|
||||
<div className="text-5xl mb-3">🎰</div>
|
||||
<h2 className="text-lg font-black text-foreground mb-1">Weekend Mega Raffle</h2>
|
||||
<p className="text-[11px] text-muted-foreground mb-4">Prize pool: 100,000 ETB · Draw: Saturday 20:00</p>
|
||||
|
||||
<div className="bg-black/20 rounded-lg p-4 mb-4">
|
||||
<div className="text-[10px] text-muted-foreground mb-1">Your tickets</div>
|
||||
<div className="text-3xl font-black text-primary">{tickets}</div>
|
||||
</div>
|
||||
|
||||
<div className="text-[11px] text-muted-foreground mb-4">
|
||||
Earn 1 raffle ticket for every 100 ETB wagered
|
||||
</div>
|
||||
|
||||
<a href="/deposit" className="inline-block w-full bg-primary text-primary-foreground font-bold py-3 rounded uppercase hover:opacity-90 transition-opacity">
|
||||
Get More Tickets
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Past winners */}
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
<div className="bg-secondary px-4 py-2 text-[11px] font-bold uppercase text-muted-foreground">Past Winners</div>
|
||||
<div className="divide-y divide-border">
|
||||
{[
|
||||
{ name: "John D.", prize: "50,000 ETB", date: "Feb 15" },
|
||||
{ name: "Sarah M.", prize: "20,000 ETB", date: "Feb 8" },
|
||||
{ name: "Abebe K.", prize: "30,000 ETB", date: "Feb 1" },
|
||||
].map((winner, i) => (
|
||||
<div key={i} className="flex items-center justify-between px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-lg">🏆</span>
|
||||
<div>
|
||||
<div className="text-[12px] font-semibold text-foreground">{winner.name}</div>
|
||||
<div className="text-[10px] text-muted-foreground">{winner.date}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-primary font-bold text-[12px]">{winner.prize}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,6 +1,110 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [step, setStep] = useState(1)
|
||||
|
||||
return (
|
||||
<div className="text-sm text-foreground">Register page placeholder</div>
|
||||
<div className="max-w-md mx-auto mt-8">
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
<div className="bg-primary px-6 py-4">
|
||||
<h1 className="text-base font-black text-primary-foreground uppercase tracking-wide">Create Account</h1>
|
||||
<p className="text-[11px] text-primary-foreground/70 mt-0.5">Join Harifsport today</p>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="flex border-b border-border">
|
||||
{["Personal Info", "Account Details", "Verification"].map((s, i) => (
|
||||
<div
|
||||
key={s}
|
||||
className={`flex-1 py-2 text-center text-[10px] font-semibold uppercase transition-colors ${
|
||||
i + 1 === step ? "bg-muted text-primary border-b-2 border-primary" :
|
||||
i + 1 < step ? "text-muted-foreground bg-primary/5" : "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{i + 1}. {s}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-4">
|
||||
{step === 1 && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">First Name</label>
|
||||
<input type="text" placeholder="First name" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Last Name</label>
|
||||
<input type="text" placeholder="Last name" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Phone Number</label>
|
||||
<input type="tel" placeholder="+251 xxx xxx xxxx" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Date of Birth</label>
|
||||
<input type="date" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Username</label>
|
||||
<input type="text" placeholder="Choose a username" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Email</label>
|
||||
<input type="email" placeholder="your@email.com" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Password</label>
|
||||
<input type="password" placeholder="Min 8 characters" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Confirm Password</label>
|
||||
<input type="password" placeholder="Repeat password" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<div className="text-center py-4">
|
||||
<div className="text-4xl mb-3">✅</div>
|
||||
<h3 className="font-bold text-foreground mb-2">Account Created!</h3>
|
||||
<p className="text-[11px] text-muted-foreground">Please verify your phone number to start betting.</p>
|
||||
<input type="text" placeholder="Enter OTP code" className="mt-4 w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary text-center tracking-widest" maxLength={6} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
{step > 1 && (
|
||||
<button onClick={() => setStep(step - 1)} className="flex-1 bg-secondary text-secondary-foreground font-semibold py-2.5 rounded uppercase text-sm hover:bg-muted transition-colors">
|
||||
Back
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => step < 3 ? setStep(step + 1) : null}
|
||||
className="flex-1 bg-primary text-primary-foreground font-bold py-2.5 rounded uppercase text-sm hover:opacity-90 transition-opacity"
|
||||
>
|
||||
{step === 3 ? "Verify & Start" : "Next"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{step === 1 && (
|
||||
<p className="text-center text-[11px] text-muted-foreground">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="text-primary hover:underline font-semibold">Login</Link>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,48 @@
|
|||
export default function RulesPage() {
|
||||
return <div className="text-sm text-foreground">Rules page placeholder</div>
|
||||
}
|
||||
const rules = [
|
||||
{
|
||||
title: "General Betting Rules",
|
||||
content: "All bets are subject to Harifsport terms and conditions. By placing a bet, you agree to abide by these rules. The minimum bet amount is 5 ETB and the maximum payout is 500,000 ETB per bet.",
|
||||
},
|
||||
{
|
||||
title: "Live Betting",
|
||||
content: "Live bets are accepted subject to availability. Odds may change at any time during live events. Bets placed during network disruptions may be voided at management's discretion.",
|
||||
},
|
||||
{
|
||||
title: "Void Bets",
|
||||
content: "Bets may be voided in cases of obvious error in odds, match postponement/cancellation, or system malfunction. Voided bets are returned to the account at stake value.",
|
||||
},
|
||||
{
|
||||
title: "Responsible Gambling",
|
||||
content: "Harifsport is committed to responsible gambling. Users may set deposit limits, loss limits, or self-exclude at any time. Gambling should be entertaining, not a source of income.",
|
||||
},
|
||||
{
|
||||
title: "Account Rules",
|
||||
content: "Each person may hold only one account. Duplicate accounts will be closed. Users must be 18+ years of age. Accounts showing signs of bonus abuse may be restricted.",
|
||||
},
|
||||
]
|
||||
|
||||
export default function RulesPage() {
|
||||
return (
|
||||
<div className="max-w-2xl space-y-4">
|
||||
<div className="border-b border-border pb-2">
|
||||
<h1 className="text-sm font-black uppercase tracking-wide text-foreground">Betting Rules</h1>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{rules.map((rule, i) => (
|
||||
<div key={i} className="bg-card border border-border rounded-lg overflow-hidden">
|
||||
<div className="bg-secondary px-4 py-2.5 flex items-center gap-2">
|
||||
<span className="bg-primary text-primary-foreground size-5 rounded-full text-[10px] font-bold flex items-center justify-center shrink-0">
|
||||
{i + 1}
|
||||
</span>
|
||||
<h3 className="text-[12px] font-bold text-foreground">{rule.title}</h3>
|
||||
</div>
|
||||
<div className="px-4 py-3 text-[11px] text-muted-foreground leading-relaxed">
|
||||
{rule.content}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user