94 lines
4.0 KiB
TypeScript
94 lines
4.0 KiB
TypeScript
"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="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>
|
|
)
|
|
} |