58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
"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>
|
|
)
|
|
} |